CODEWITHSUNDEEP
javascriptjqueryhtmlcss-selectorsjquery-selectors
K.Z
K.Z

Reputation: 5075

find a:selected element from list using JQuery

I need to pick an ID tag with a selected element. I also need to consider I have nested <ul> with <li>. I will always have only one tag with element selected="selected". The JQuery I have provided is not working.

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 ..

What am I doing wrong.

Upvotes: 0

Views: 47

Answers (3)

John Slegers
John Slegers

Reputation: 47081

The selected attribute is intended for <option> elements inside a <select> element. jQuery's pseudo-selector :selected is only intended to match <option> elements that have this attribute.

Nevertheless, it IS possible to select other HTML elements with a selected attribute that has value selected, by doing this :

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

A demo :

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>

Note :

While value and selected are perfectly valid attributes for an <option> element, they aren't valid attributes for the <a> element. While browsers are supposed to ignore this, it's better to use only valid attributes. For custom attributes, it means that their name should start with data-.

So, just rename value as date-value and selected as date-selected, and you do have valid 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>

Upvotes: 2

Quentin
Quentin

Reputation: 943213

<option>s can be selected, <a>s cannot.

If you want to match invalid extendo-attributes, then you have to use an attribute selector.

a[selected]

You should use something else to indicate the state, such as a class.

Upvotes: 2

charlietfl
charlietfl

Reputation: 171679

Use a class instead of attribute.

Setting an attribute only on one element of a collection is more complicated than using classes that are simple to toggle

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

Then selector is

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

Upvotes: 1

Related Questions