Question

我想选择jquery使用id = result-XX处于活动状态的所有li元素（class = .... active）。

HTML页面包含：

<li id="result-1" class="list-group-item hover active">
</li>
<li id="result-2" class="list-group-item hover">
</li>
<li id="result-3" class="list-group-item hover">
</li>

我尝试过以下操作（仅用于选择结果列表）但不起作用：

console.log("Result: " + $('li[id^="result-1"').length);
console.log("Result: " + $("li:contains('result-')").length);
console.log("Result: " + $("li[id~='result-']").length);

然后，我们只需要获得活跃的那些。

Answer 1

让我们分解所需的选择器：

li - 这将匹配所有li元素。 Element selector
[id^="result-"] - 这将匹配id属性以result-开头的所有元素。 Starts with selector。
.active - 这将匹配所有具有active类的元素。 Class selector

组合它们将为您提供所需的最终选择器：

var elements = $( 'li.active[id^="result-"]' );

为了给这个更多的可读性，我建议这样写：

var elements = $( 'li[id^="result-"]' ).has( '.active' );

这会使用has()过滤器将匹配元素集合仅限于拥有 active类的人。

Answer 2

第一个应该可以工作，但你的选择器是错误的。它应该是$('li[id^="result-"]')。

您可以使用$('li[id^="result-"]').filter(".active")将设置缩减为active个设置，例如

var elements, activeElements;
elements = $('li[id^="result-"]');
activeElements = elements.filter(".active");

请参阅http://api.jquery.com/filter/

Answer 3

您必须将attribute starts with selector与class selector结合使用才能完成任务。

尝试，

$('li[id^="result-"].active')

如何使用jquery选择多个HTML元素

3 个答案: