按內聯css屬性排序選擇框選項（jquery）

Question

我有以下選擇框，並想按display:none inlne屬性對它進行排序，所有不具有display:none屬性的選項將顯示在頂部，其餘選項將爲在他們之後顯示。如何在jQuery中做到這一點？

代碼

<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> 

Answer 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); 

DEMO

希望這有助於

Answer 2

未必是很好的解決方案，但它工作

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()); 
})