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

Question

我想使用 jquery 选择所有 id=result-XX 的 li 元素是事件的(class=....事件的)。

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

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

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

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

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

---

为了提高可读性，我建议这样写:

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

这使用了 has()过滤以将匹配元素集减少到仅那些拥有 active 类的元素。