javascript - Jquery 选择器，用于选择表单中位于一个元素之后的所有具有类的元素

Question

我需要找到类 'complexList' 的所有元素采用 'el' 之后的形式.

示例

var el = $(this);
var els = $('#' + obj.tableId + '_editorForm').find('.complexList');
el.nextAll('.complexList') //dont work

谢谢

Answer 1

如果nextAll不起作用，则意味着存在不同嵌套级别的元素。但你仍然可以这样做，使用 index和 slice .

els = els.slice(els.index(el) + 1);

index，当如上调用时，查找匹配集中给定元素的索引； slice 返回集合中元素的子集。因此我们要求以 el 之后的元素开始的子集。

示例:

var obj = {
  tableId: "foo"
};
$(document.body).on("click", ".complexList", function() {
  var el = $(this);
  var els = $('#' + obj.tableId + '_editorForm').find('.complexList');
  els.css("color", ""); // clear previous
  els = els.slice(els.index(el) + 1);
  els.css("color", "blue");
});

All of the text fields below are `.complexList` fields. Click any of them to turn all `.complexList` elements <em>after</em> it blue.
<form id="foo_editorForm">
  <label>
    Field 1:
    <input type="text" class="complexList" value="field1">
  </label>
  <label>
    Field 2:
    <input type="text" class="complexList" value="field2">
  </label>
  <label>
    Field 3:
    <input type="text" class="complexList" value="field3">
  </label>
  <label>
    Field 4:
    <input type="text" class="complexList" value="field4">
  </label>
  <label>
    Field 5:
    <input type="text" class="complexList" value="field4">
  </label>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>