Question

<li>
  <select id="foo"></select>
</li>
<li>
  <select id="bar"></select>
</li>
<li>
  <select id="baz"></select>
</li>

var select_after = function(src){
   //How get all select elements after the one specified as argument ?
}

如何编写此方法？

select_after($("#foo"))

应返回数组中的#bar和#baz元素

select_after($("#bar"))

应返回数组中的#baz元素

select_after($("#baz"))

应该返回空数组

我应该怎么写这个方法？

Answer 1

对于简单的单线程，您可以使用以下链：

$("#foo").parent().nextAll().children("select");

上面的代码首先选择父元素，即li元素，然后选择它后面的所有兄弟元素，最后返回其中的select元素。如this fiddle中所示。

然而，这种方法既笨重又慢，因为你走的是DOM。我更喜欢使用的另一种方法，因为在使用更大的元素集时，它更快，

预先选择所有select个元素，然后通过循环它们来创建一个引用id的索引对象。现在你可以拼接jQuery对象来获取之后（或之前）的元素。

// Preselect select elements
var selects = $("ul > li > select"),
    // Prepare empty object to hold index reference
    idx = {};

// Loop through the select elements and build index reference
selects.each(function(i){idx[this.id] = i;});

// Get select elements after #foo
console.log(selects.slice(idx.foo+1));

// Get select elements before #baz
console.log(selects.slice(0, idx.baz));

在this fiddle中查看上述方法。

jQuery选择。逐个查找元素

1 个答案: