I'm trying to loop through all <li> tags that contain the class .fas using the jQuery contains() method and perform some stuff on each one.
$('li:contains(".fas")').each(function (index) {
//stuff
}
I keep getting the reference error that contains is not defined. Am I using this method incorrectly?
You want has().
$('li:has(".fas")').each(function (index) {
//stuff
}
https://api.jquery.com/has/
Another way to do this would be to flip your logic.
$('.fas').closest('li');
You could find all the fas and then find their parent lis.
Your question ambiguity leaves me to cross answer this.
First off:
$('li.fas')
That says to the sizzle engine: Get all elements that have class fas, then reduce that to elements of li (that have that class)
With a space in between this says:
$('li .fas')
Get all elements that have a class fas, then reduce to those that are a decedent of an li element.
$('li>.fas')
Get all elements that have class fas, then reduce that do a set that are direct children of an li element.
The other answer has the .has() so I will not repeat that.
Filter: (basically same as :has() in this case
$('li').filter(function(){
// reduce the li set; return true when a descendant has the 'fas' class
return !!$(this).find('.fas').length;
});
More on context here: https://stackoverflow.com/a/16423239/125981
Related
I want to do something like:
if($(this).hasClass("playButton"))
{
$(this).find("li").removeClass("active");
}
But instead of "this" in "if" statement I want to use any class selector. But I don't know how to get concrete DOM element, which corresponds to the condition.
So I need:
if($(.anyClass).hasClass("playButton"))
{
$(current element, which corresponds to
if condition).find("li").removeClass("active");
}
$(".playButton li").removeClass("active");
...?
You can select the elements using the ".anyClass" selector and then iterate through them using each. In the callback function of each, this will refer to the current DOM element.
$(".anyClass").each(function() {
if ($(this).hasClass("playButton")) {
$(this).find(".btn").removeClass("playButton");
}
});
However, for this particular scenario, you can reach your goal without using each. Simply target the element directly and manipulate it, as #Derek朕會功夫 suggested in his answer.
$(".playButton li").removeClass("active");
I have a simple structure like:
HTML
<ul id="costsDropdown">
<li data-position="bla bla"></li>
</ul>
and I want to change each "data-position" attribute of my list Elements.
My first Jquery Shot was this here:
$("#costsDropdown ul").each(function() {
$("li").attr("data-position", "TEST-VALUE123");
});
but it doesnt work, I think my selector are wrong...
could anyone give me a hint please?
Thanks for any help!
Greetz
Your selectors are a bit off
$("#costsDropdown ul").each
That is trying to select the child ul of the container #costsDropdown (which is the ID of the ul) - what you want is:
$("#costsDropdown li").each(function() {
$(this).attr("data-position", "TEST-VALUE123");
});
ID's are unique - no need to double up the selector with an ID and the type of element it is.
Note that I used $(this), not $("li"), inside the each callback. $("li") selects all li elements, anywhere on the page; we just want a jQuery wrapper for the one specific one we're handling inside the each.
In fact, the each is completely unnecessary because of the set-based nature of jQuery; if you use the .attr setter, it sets the attribute on all elements in the set:
$("#costsDropdown li").attr("data-position", "TEST-VALUE123");
That will set the value on all of the li elements inside #costsDropdown.
If you need to set separate individual values on the individual li elements, you still don't need each (though it's fine if you want to use it); you can use the version of attr that accepts a callback that it uses to find out what value to set:
$("#costsDropdown li").attr("data-position", function(index) {
return "Test value " + index;
});
That will set "Test value 0" on the first li, "Test value 1" on the second, etc. And like the each example above, if you need to, you can use this within the callback to refer to the li for that call (possibly using $(this) to wrap it if you need a jQuery wrapper).
$("#costsDropdown ul") matches no elements, it has to be $("#costsDropdown") (#costsDropdown is the ul).
And even that is unnecessary. Go
$("li[data-position]").attr("data-position", "TEST-VALUE123");
instead.
alert($("div#keylist ul li").filter("[display=block]").first().position().top);
I do have a div with id as keylist and there is an unordered list in it. I want .position().top of first visible element.
Actualy [display=block] is not a right selector
use :visible selector instead
alert($("div#keylist ul li:visible").first().position().top);
I think this is what you need
alert($('ul > li').filter(function(){
return $(this).css('display') == 'block';
}).first().text());
Demo
As mentioned inn the previous answers [display=block] is not a selector. But if you still insist on selecting li elements which has this css property you can go by class
Here are few way you can achieve the same
// Using Filter
alert("Using Filter " +$("div#keylist ul li").filter(".blockDec").first().position().top);
Since you already have parent as div#keylist you can use find() rather than using filter()
Here is difference between filter & find
Also you can take a look Here & Here to optimized the selector
//Using find .Here it will find all child element of ul
alert("Using Find " +$("div#keylist ul").find(".blockDec").first().position().top);
//Optimizing the jQuery selector
alert("Optimized " +$("#keylist").find(".blockDec:first").position().top);
JSFIDDLE
I want to select all the child elements of a parent element (except the first) with jQuery and I have the below..
$("li:not(:first-child)");
But I'm not sure how I can apply it to just the certain parent ID, would something like this work?
$('#myID').("li:not(:first-child)");
If so, I then want to add an element before the respective <li> tag. Would I then be able to do this with?
$('#myID').("li:not(:first-child)").before('<li>Test</li>');
I'm guessing something above is wrong as it isn't working.
Close, just pass in the selector context:
$("li:not(:first-child)", "#myID")
http://api.jquery.com/jQuery/
jQuery( selector [, context] )
selector: A string containing a selector expression
context: A DOM Element, Document, or jQuery to use as context
EDIT:
My initial answer assumed that you have no more li within the child's li. if you strictly only wants to select the children, use >:
$("#myID > li:not(:first-child)")
There's different solutions:
$("li:not(:first-child)", "#myID"); // see #SiGanteng answer
$("#myID li:not(:first-child)");
$("#myID").find("li:not(:first-child)");
Simple: using the :gt() help selector:
Just do it like: demo fiddle
$("#myID li:gt(0)").before('<li>Test</li>');
If you are concerned about speed :) :
$("#myID").find("li:gt(0)").before('<li>Test</li>');
or like: demo fiddle
$("#myID li:not(:first-child)").before('<li>Test</li>');
Assuming #myID is a ul or ol element, another possible way to get all children but the first is
$('#myID').children().slice(1)
How can I get a sub element from $(this)?
So for example, how would I target a span element within the this object?
You could use the find method:
$(this).find("span");
That will find all span elements that are descendants of the element referred to by this.
If you only care about direct children you could use children instead:
$(this).children("span");
Alternatively, you could use this as the context to a selector:
$("span", this);
Yet another solution would be required if this was a jQuery object that contained a set of sibling elements (so the span is not a descendant). In that case, you would need filter:
$(this).filter("span");