1

次の選択ボックスがあり、属性を持たないすべてのオプションが上部に表示され、残りのオプションがそれらの後に表示されるように、 display:noneinlne 属性で並べ替えたいと考えています。display:nonejquery でこれを行う方法は?

コード

<select id="changeme"> 

<option style="display:none;">1</option>
<option>2</option>
<option>3</option>
<option style="display:none;">4</option>
<option>5</option>
<option style="display:none;">6</option> 
<option>7</option> 
<option style="display:none;">8</option>


</select>

属性を持つオプションがdisplay:none表示されないことはわかっていますが、レンダリングされた html が次のようになることを望んでいます

<select id="changeme"> 


<option>2</option>
<option>3</option>
<option>5</option>  
<option>7</option> 
 <option style="display:none;">4</option>
 <option style="display:none;">6</option>
 <option style="display:none;">1</option>
 <option style="display:none;">8</option>


 </select>
4

2 に答える 2

1

display:noneまず、私が使用したスタイルを使用する代わりに、class=showLast簡単かもしれません

<select id="changeme">
    <option class="showLast">1</option>
    <option>2</option>
    <option>3</option>
    <option class="showLast">4</option>
    <option>5</option>
    <option class="showLast">6</option>
    <option>7</option>
    <option class="showLast">8</option>
</select>

this.className === showLastクラスのオプションを最初に表示するか最後に表示するかに応じて、条件を変更することもできます。

var withClass = $('#changeme > option').map(function() {
    if (this.className === 'showLast') {
        return this;
    };
}).toArray();
$('#changeme').append(withClass);

デモ

お役に立てれば

于 2012-06-09T09:37:21.557 に答える
0

良い解決策ではないかもしれませんが、うまくいきます

var options = [];
var select = $('#changeme');
select.find('option').each(function(){
    var $this = $(this);
    if($this.css('display') === 'none'){
        options.push($this.wrap('<p />').parent().html());
    }
    else{
        options.unshift($this.wrap('<p />').parent().html());
    } 
})  
select.html(options.join(''));

編集：

これはより単純なコードです (ただし、値として非表示のオプションにつながる可能性がありselectます) 。

$('#changeme').find('option').filter(function(){
        var $this = $(this);
        if($this.css('display') == 'none')
        $this.appendTo($this.parent());
})
于 2012-06-09T09:52:30.497 に答える