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");
Related
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.
Looping through all the elements of the class, I see the code below only affecting the first element in the array yet the console log logs every one of them.
del = $('<img class="ui-hintAdmin-delete" src="/images/close.png"/>')
$('.ui-hint').each(function(){
console.log($(this));
if ($(this + ':has(.ui-hintAdmin-delete)').length == 0) {
$(this).append(del);
}
});
The elements are all very simple divs with only text inside them. They all do not have the element of the class i am looking for in my if statement, double checked that. Tried altering the statement (using has(), using children(), etc). Guess i'm missing something very simple here, haha.
Will apperciate input.
I think what you need is (also if del should be a string, if it is a dom element reference then you need to clone it before appending)
$('.ui-hint').not(':has(.ui-hintAdmin-delete)').append(function(){
//you need to clone del else the same dom reference will be moved around instead of adding new elements to each hint
return del.clone()
});
You can do this:
$('.ui-hint:not(:has(.ui-hintAdmin-delete))').append(del);
without even using the each loop here. As jquery code will internally loop through all the descendant of the ui-hint class element and append the del element only to the descendant not having any .ui-hintAdmin-delete elements.
While it would probably help to see your HTML as well, try changing your conditional to
if (!$(this).hasClass('ui-hintAdmin-delete')) {
$(this).append(del);
}
How do I change only elements inside of the link that is clicked?
I thought children of this would work but no luck.
$('.sort').click(function () {
$(this).children('i').toggleClass('icon-arrow-up-12');
});
Use find (api.jquery.com/find), like this:
$(this).find('i').toggleClass('icon-arrow-up-12');
Children are the immediate nodes beneath the current one. You need descendants. You also need to set the context:
$('.sort').click(function () {
$('i', this).toggleClass('icon-arrow-up-12');
});
If I understand you well:
$('.sort').click(function () {
$(this).toggleClass('icon-arrow-up-12');
});
.children() should actually work ..
It is difficult to say without knowing the HTML... If you are trying to get to the nested elements
You can use .find()
$(this).find('.i') OR find('#i')
What is i here .. is it class element or ID ..
My code looks like this, in closeup:
<h2>
<span class="stuff">[<a id="someid">stuff</a>]</span> <span class="moreStuff">Another test</span>
</h2>
I've found a way to select my a element, and attach an id to it. What I need to do now is select its parent <h2> element, but not the <span> element. How can I do that (JQuery allowed)?
Edit: when I retrieve the selected <a>s, I get an array of them (there's lots of these structures on my page). When I try to write myArray[someIndex].closest("h2"), it says that the element does not have a closest() method. How would I go about this?
One ways is to use the .parents() method of jQuery, with a selector. Something like this.
$("#someid").parents("h2");
Update:
You can use the .closest() method with a selector, to only get the closest parent that match the selector.
$("#someid").closest("h2");
Update 2:
It would be a bit more work to do it with plain JavaScript. Not sure if it is the most efficient, but one way would be to select the element with document.getElementById() and then get a reference to its parent through the parentNode property. Then you would have to check if it is an h2 element, and if not, look at that elements parent node, and so on.
You could check the jQuery source and see how they have implemented the closest method.
I just needed the same thing. here a vanilla javascript variant:
function findParent(startElement, tagName) {
let currentElm = startElement;
while (currentElm != document.body) {
if (currentElm.tagName.toLowerCase() == tagName.toLowerCase()) { return currentElm; }
currentElm = currentElm.parentElement;
}
return false;
}
The <h2> is not the parent of the <a> but it is an ancestor, use .closest() to select it
$("#someid").closest("h2");
try use .parent() for get exactly double or more level up the DOM tree.
$("#someid").parent().parent();
I ran into this very odd scenario.
This won't hide the H1:
if ($('#content h1').hasClass('active')) {
$(this).hide();
}
Only this will:
if ($('#content h1').hasClass('active')) {
$('#content h1').hide();
}
Why can't I use the (this)? Is something wrong with the script?
That is the correct behaviour. In the context of your if statement this does not hold a reference to your h1 element but to the document element (or function if you are inside of a function).
You could do:
$('#content h1').foreach(function() {
if (!$(this).hasClass('active')) {
$(this).hide();
}
});
In this case, as Jan explained, this will be in the context you expect it to be (the heading element).
What you want is probably
var h1 = $('#content h1')
if (h1).hasClass('active')) {
h1.hide();
}
your "this" will, as stated above, not reference your object.
The statement $('#content h1').hasClass('active') returns a Boolean value (true or false), as opposed to a jQuery object, which is what you're trying to use $(this) for. See the usage of hasClass here.
If you're trying to perform an action on all elements that match a certain selector, give this selector a try instead:
$("#content h1.active").hide();
This finds all elements with an id attribute of "content" that contain an h1 element with a class attribute of "active," and hides them all.