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.
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>
<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.
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");
Related
I am currently working with the mmenu jquery plugin. http://mmenu.frebsite.nl/documentation/core/off-canvas.html
Is there way to keep my class names that use in my navigation items when the mmenu plugin is triggered? They are removed and i have headings for menu items that I need to style.
For reference:
<ul>
<li><a class="dropdown-item nav-heading" href="#">Coffee Services</a></li>
<li><a class="dropdown-item" href="#">Quality Equipment</a></li>
<li><a class="dropdown-item" href="#">Our Coffees</a></li>
</ul>
Becomes:
<ul class="mm-listview">
<li class="mm-listitem">Coffee Services</li>
<li class="mm-listitem">Quality Equipment</li>
<li class="mm-listitem">Our Coffees</li>
</ul>
I need to keep the 'nav-heading' class!
By some testing I discovered that the plugin removes all classes that are attached to any div, a, li or span. If you add classes to any other element inside the li tag, it does get copied over. So you can use an i element if you want the classes to be copied. For example:
<li>
<a class="dropdown-item" href="#">
<i class="nav-heading">
Coffee Services
</i>
</a>
</li>
This will get copied like this:
<li class="mm-listitem">
<a href="#" class="mm-listitem__text">
<i class="nav-heading">
Coffee Services
</i>
</a>
</li>
Then in your CSS counter the styling the i tag adds, and add your own:
.nav-heading {
font-style: initial;
// Add your styling
}
I'm not sure what situation that you are facing. But if I found this trouble, I will use Mutation Observer for detecting changes of HTML element. You can insert 'nav-heading' into class attribute when you've detected any change of the element (The class attributes change).
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
If your classes are removed by the plugin itself, nothing to do with that but you can dynamically add your desired class. Using this snippet may help you.
$(document).ready(function(){
$('.mm-listitem:eq(0)').addClass('nav-heading');
$('.mm-listitem').on('click', function(){
$('.mm-listview > *').removeClass('nav-heading');
$(this).addClass('nav-heading');
})
});
Could you please help me in dynamically calling attrib value through jQuery from the 'li class' by identifying the 'itemprop'?
My HTML is as below,
<ul class="blockNoBordr">
<li class="specHeading">Model</li>
<li class="specText" itemprop="model">
<span class="attribVal newattribVal">32LJ573D</span>
</li>
</ul>
I want to dynamically call Model value into a JS code i.e., 32LJ573D
console.log($('ul li[itemprop="model"].specText').first().text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="blockNoBordr">
<li class="specHeading">Model</li>
<li class="specText" itemprop="model">
<span class="attribVal newattribVal">32LJ573D</span>
</li>
</ul>
You need to pick li inside your ul with a specific class. The following code will work for you. I have printed text of li with class "specText" for reference. You could modify any attribute as per your requirement.
console.log($('ul li[itemprop="model"].specText').first().text());
When you choose elements by classname, multiple elements are returned in an array. So choose the first element by adding index [0].
$('.classname')[0].innerHTML
I have an unstructured list(ul) inside div tags and I am trying to get the title of an anchor tag, which is inside an li that has class="selected".
<div class="mainmenu">
<div class="mainmenulinks">
<ul>
<li class="selected">
<a class="topmenu-navigation-links" id="topMenuItem0" href="" title="Private">
<span class="span-link-Private">Private</span>
</a>
</li>
<li>
<a class="topmenu-navigation-links" id="topMenuItem1" href="" title="Business">
<span class="span-link-Business">Business</span>
</a>
</li>
<li>
<a class="topmenu-navigation-links" id="topMenuItem2" href="" title="Broker">
<span class="span-link-Broker">Broker</span>
</a>
</li>
</ul>
</div>
</div>
In this case, I should be getting Private as its li has class="selected".
[Updated] Working Fiddle https://jsfiddle.net/prashantkumar_999/rd9zttyn/9/
You can use:
$("li.selected>a").attr("title")
If you need to be more specific, you can add before the li, eg:
$(".mainmenu .mainmenulinks li.selected a").attr("title")
Your fiddle doesn't work as you've
not included jquery
not included "." for some classes (but have for others)
with hasClass, it needs to be in quotes without ".", eg .hasClass("selected")
tried to use this outside of a relevant context
Prop vs Attr
Summary of Preferred Usage
The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.
while prop does work and is an easy fall-back incase you're not sure which to use, it should be attr for title.
Try this
$('li.selected').find('a').attr('title');
Updated Fiddle https://jsfiddle.net/rd9zttyn/3/ which is working fine
I am unable to change any html on the website in question.
Here is some html:
<ul id="utility-menu" class="menu menu--primary">
<li><a class="" href="https://www.example.com/newsstand" target="_blank">Magazines</a></li>
<li><a class="" href="https://secure.bla.com/example/promo/GiveAGift/" target="_blank">Gifts</a></li>
<li>
Français
</li>
<li><a class="" href="/signin">Sign In</a></li>
<li>
<div class="i-am-canadian">
<img alt="Canadian flag" height="23px;" src="https://secure.example.com/assets/images/icons/ui/i-canadian-c8a132ad64588dcc0b2e61cc589dfef3.png" width="40px;">
</div>
</li>
</ul>
I managed to select the menu using:
document.querySelectorAll('.menu--primary')[0]
The element I'm interested in is:
Français
This element i a language selection for the site visitor that will be either "English" or "Français".
If the user is on an English language page the value of the element will be that shown. But if they are on the French language equivalent the element will be English
I would like a selector that returns either "English" or "Français".
How would I do that?
Answer:
var el = document.querySelector('#utility-menu a[href^="/email_check?lang="').textContent;
It will select first a element with attribute href begining with /email_check?lang= in #utility-menu. Probably you can .trim() text to get rid of whitespaces.
If your html is not going to change much, you can use
var test = document.querySelector("ul > li > a[href='/email_check?lang=fr']");
console.log(test.textContent); // Français
https://jsfiddle.net/u4vjq8ah/
I have a dynamically built unordered list like below, and I want to find a way to expand all the nodes above the link with a certain id once the list is loaded using jquery,
For example I might want to expand all the nodes required for the link with the id=1905 to be visiblem and leave all other nodes collapsed.
Hope this makes sense.
<div id="menu">
<ul>
<li><a class="inactive" href="#"><img src="images/folder.png">Baking</a>
<ul>
<li><a class="inactive" href="#">Bars</a>
<ul>
<li><a id="1905" class="rlink" href="url">Rasberry Crumb Breakfast Bars</a></li>
</ul>
</li>
</ul>
</li>
<li><a id="1803" class="rlink" href="url">text</a></li>
</ul>
</div>
So the list would initially load like this
And I would want to expand it like this
You could try going up the parent nodes of the element you want and activate them:
var parentList= $('#link1905').closest('ul');
while (parentList.length > 0) {
parentList.prev('a').removeClass('inactive'); /* and/or .addClass('active'); */
parentList = parentList.closest('ul');
}
Also you must start your element id's with a letter: What are valid values for the id attribute in HTML?