javascript - .eq 返回所有选择

Question

我有这个 html 结构:

<select class="required form-control parameter-criteria" selectpicker="" data-id="2" tabindex="-98">
        <option value="1" data-content="<span class=&quot;badge-min filter d-inline-flex&quot; style=&quot;background-color:#ff0000;&quot;> </span>CRITERIO 1 [0 - 50] - CRITERIO 2" id-criteria="2">CRITERIO 1
        </option>
</select>
<select class="required form-control parameter-criteria" selectpicker="" data-id="2" tabindex="-98">
        <option value="1" data-content="<span class=&quot;badge-min filter d-inline-flex&quot; style=&quot;background-color:#ff0000;&quot;> </span>CRITERIO 1 [0 - 50] - CRITERIO 2" id-criteria="2">CRITERIO 1
        </option>
</select>

我试图获得一个特定的选择，所以我这样做了:

var select = $('.parameter-criteria[data-id=2]').eq(2);

这应该只返回最后一个选择 .eq(2) 但如果我打印 select 我会得到两个，为什么？

Answer 1

那是因为 eq() 索引是基于 0 的...比如第一个元素为 0，第二个元素为 1，依此类推。您只有两个匹配元素，但 eq(2) 查找列表中不存在的第三个子元素并返回所有元素。

var select = $('.parameter-criteria[data-id=2]').eq(0);
console.log(select.text().trim());
var select2 = $('.parameter-criteria[data-id=2]').eq(1);
console.log(select2.text().trim());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="required form-control parameter-criteria" selectpicker="" data-id="2" tabindex="-98">
        <option value="1" data-content="<span class=&quot;badge-min filter d-inline-flex&quot; style=&quot;background-color:#ff0000;&quot;> </span>CRITERIO 1 [0 - 50] - CRITERIO 2" id-criteria="2">CRITERIO 1
        </option>
</select>
<select class="required form-control parameter-criteria" selectpicker="" data-id="2" tabindex="-98">
        <option value="1" data-content="<span class=&quot;badge-min filter d-inline-flex&quot; style=&quot;background-color:#ff0000;&quot;> </span>CRITERIO 1 [0 - 50] - CRITERIO 2" id-criteria="2">CRITERIO 2
        </option>
</select>