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

Posted 2023-05-09

【中文标题】使用 JQuery 从列表中查找 a:selected 元素

【英文标题】：find a:selected element from list using JQuery

【发布时间】：2016-06-24 00:29:18

【问题描述】：

我需要选择一个带有选定元素的 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 ..

我做错了什么。

【参考方案1】：

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

尽管如此，通过执行以下操作，可以选择具有 selected 属性且值为 selected 的其他 HTML 元素：

$(".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>

【参考方案2】：

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

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

a[selected]

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

【参考方案3】：

使用类而不是属性。

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

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

那么选择器就是

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