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

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

尽管如此，可以通过这样做选择具有值selected的{{1}}属性的其他HTML元素：

selected

演示：

＆＃13;

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

＆＃13;

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

＆＃13;

注意：

虽然<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元素的完全有效属性，但它们aren't valid attributes for the <a> element。虽然浏览器应该忽略这一点，但最好只使用有效的属性。对于自定义属性，这意味着他们的名称应以<option>开头。

因此，只需将data-重命名为value，将date-value重命名为selected，即可获得有效的HTML：

＆＃13;

date-selected

＆＃13;

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

＆＃13;

Answer 2

可以选择

<option>，<a>不能。

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

a[selected]

你应该用别的东西来表示状态，比如一个类。

Answer 3

使用类而不是属性。

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

更复杂

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

然后选择器

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

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

JQuery的

HTML

3 个答案:

演示：

注意：