使用 JQuery 从列表中找到 a:selected 元素

Question

我需要选择一个带有所选元素的 ID 标签。我还需要考虑我已经嵌套了 <ul> 和 <li>。我将永远只有一个带有元素 selected="selected" 的标签。我提供的 JQuery 无效。

JQuery

 $(".SortFilterMenu li").find("a:selected").attr("id");

HTML

 <ul class="SortFilterMenu">
            <li><a id="RecommendedSort" value="Recommended" class="sortLabelElement sortTag sortClickedEvent" selected="selected">Our Recommendation</a></li>
         //rest of code here ..

我哪里做错了。

Answer 1

selected 属性适用于 <select> 元素内的 <option> 元素。 jQuery 的伪select 或:selected 仅用于匹配具有此属性的<option> 元素。

然而，可以 select 其他 HTML 具有 selected 属性且值为 selected 的元素，方法是：

$(".SortFilterMenu li").find("a[selected=selected]").attr("id"));

一个演示：

alert($(".SortFilterMenu li").find("a[selected=selected]").attr("id"));

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<ul class="SortFilterMenu">
    <li><a id="RecommendedSort" value="Recommended" class="sortLabelElement sortTag sortClickedEvent" selected="selected">Our Recommendation</a></li>
    <li><a id="AnotherSort" value="AnotherOne" class="sortLabelElement sortTag sortClickedEvent">Something else</a></li>
    <li><a id="YetAnotherSort" value="YetAnotherOne" class="sortLabelElement sortTag sortClickedEvent">Something more</a></li>
</ul>

注意：

虽然 value 和 selected 是 <option> 元素的完全有效属性，但它们 aren't valid attributes for the <a> element。虽然浏览器应该忽略这一点，但最好只使用有效属性。对于自定义属性，这意味着它们的名称应该以 data-.

开头

因此，只需将 value 重命名为 date-value 并将 selected 重命名为 date-selected，您就拥有了有效的 HTML :

alert($(".SortFilterMenu li").find("a[data-selected=selected]").attr("id"));

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<ul class="SortFilterMenu">
    <li><a id="RecommendedSort" data-value="Recommended" class="sortLabelElement sortTag sortClickedEvent" data-selected="selected">Our Recommendation</a></li>
    <li><a id="AnotherSort" data-value="AnotherOne" class="sortLabelElement sortTag sortClickedEvent">Something else</a></li>
    <li><a id="YetAnotherSort" data-value="YetAnotherOne" class="sortLabelElement sortTag sortClickedEvent">Something more</a></li>
</ul>

Answer 2

使用 class 而不是属性。

仅在集合的一个元素上设置属性比使用易于切换的 classes 更复杂

<li><a id="RecommendedSort" data-value="Recommended" 
       class="sortLabelElement sortTag sortClickedEvent selected">
        Our Recommendation
    </a>
</li>

那么选择器是

$(".SortFilterMenu li a.selected").attr("id");

Answer 3

<option>可以选择，<a>不可以。

如果要匹配无效的扩展属性，则必须使用属性选择器。

a[selected]

您应该使用其他东西来指示状态，例如 class。

使用 JQuery 从列表中找到 a:selected 元素

find a:selected element from list using JQuery

html

javascript

jquery

css-selectors

jquery-selectors

JQuery

HTML

一个演示：

注意：