是否有可能使用jQuery獲取HTML元素數組項的索引？

Question

我有一個編程添加的選擇框的數組。他們的名字是「array-ified」（見下文）。

<select name="blah[]"> 
    <option value="A">A</option> 
    <option value="B">B</option> 
</select> 
<select name="blah[]"> 
    <option value="A">A</option> 
    <option value="B">B</option> 
</select> 
<!-- and more... --> 

當每次添加，我想補充一個onChange將審查其選擇。如果選擇值是「A」，則所有blah[]選擇高於它將被設置爲「A」。如果選擇值是「B」，那麼所有的blah[]選擇低於將被設置爲「B」。

任何想法如何做到這一點，除了通過手動設置名稱，當我以編程方式添加字段（「blah1」，「blah2」等...）？ jQuery可以以某種方式獲取每個元素的索引嗎？

謝謝！

Answer 1

.index()應該做的伎倆

$('select').live('change', function() { 
    var index = $('select').index(this); 
    $('select').each(function(i) { 
     if (i < index) { 
      // do something to ones above 
     } 
     else (i > index) { 
      // do something to ones below 
     } 
    }); 
}); 

Answer 2

如果您想選擇其它選擇項目，假設他們在DOM可以可以使用jQuery的.nextAll（）相同的水平/ prevAll（）遍歷方法。

假設與「SelectContainer」的ID父DIV然後下面應該工作：

UPDATE

對不起沒有準備不當，已經更新到你問什麼:)。

$('#SelectContainer').delegate('select', 'change', function() { 
    var select = $(this), 
     selectedValue = select.val(), 
     otherSelects = select[selectedValue === 'A' ? 'prevAll' : 'nextAll']('select'), 
     selectedIndex = select.children(':selected').index(); 

    otherSelects.val(selectedValue); 
}); 

運行實例：http://jsbin.com/ofodac/2/edit

我已經放置的東西，如變量了selectedValue，使其更容易執行，而是使之更簡潔，你可以很容易地減少變量的數目。

Answer 3

試試這個：http://jsfiddle.net/shaneburgess/zdbC3/

<select name="blah[]" class="select"> 
    <option value="A">A</option> 
    <option value="B">B</option> 
</select> 
<select name="blah[]" class="select"> 
    <option value="A">A</option> 
    <option value="B">B</option> 
</select> 

<select name="blah[]" class="select"> 
    <option value="A">A</option> 
    <option value="B">B</option> 
</select> 

<select name="blah[]" class="select"> 
    <option value="A">A</option> 
    <option value="B">B</option> 
</select> 
<!-- and more... --> 

JS：

$('.select').change(function(){ 
    var mainIndex = 0; 
    mainIndex = $(this).index(); 
    if($(this).val() == 'B'){ 


     $.each($('.select'),function(){ 

      if($(this).index() > mainIndex){ 
       $(this).val('B'); 
      } 
     }); 
    }else{ 
     $.each($('.select'),function(){ 

      if($(this).index() < mainIndex){ 
       $(this).val('A'); 
      } 
     }); 
    } 
});