是否可以使用 jQuery 获取 HTML 元素数组项的索引？答案

【问题标题】：Is it possible to get an HTML element array item's index using jQuery?是否可以使用 jQuery 获取 HTML 元素数组项的索引？
【发布时间】：2011-10-11 07:13:09
【问题描述】：

我有一个以编程方式添加的选择框数组。他们的名字是“数组化的”（见下文）。

<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 能否以某种方式获取每个元素的索引？

谢谢！

【问题讨论】：

标签： jquery html arrays select

【解决方案1】：

如果要选择其他选择项，假设它们在 DOM 中处于同一级别，则可以使用 jQuery 的 .nextAll()/prevAll() 遍历方法。

假设父 div 的 id 为“SelectContainer”，那么以下应该可以工作：

更新

抱歉没有正确准备，已更新以按照您的要求进行操作:)。

$('#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 之类的内容，以便更容易理解，但为了更简洁，您可以轻松减少变量的数量。

【讨论】：

【解决方案2】：

试试这个：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');
            }
        });
    }
});

【讨论】：

【解决方案3】：

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

【讨论】：