Ok, so i've got this .parents() function that goes outside to a located class/id. In my case, (.wrapper).
<div class="wrapper">
<div class="hide">Hide Class</div>
<div class="boxClass></div>
</div>
I've got a list of these div's on a single page, so, if i click the "Hide Class" text, everything would fadeout, since everything in the list, has the same class name. Now, back to my question. I use .parents() to locate (.wrapper) (i know this can be done with (.parent)). But how can i use .parents to go back and then select (fadeOut) a class inside it? EX, boxClass?
In your case, they're siblings, so just use the siblings()(docs) method in the handler.
$(this).siblings('.boxClass').fadeOut();
Or if they're not actually siblings, use the closest()(docs) method then the find()(docs) method.
$(this).closest('.wrapper').find('.boxClass').fadeOut();
Inside a handler this represents the element that invoked the handler. As such, it is a direct reference to the specific .hide element that was clicked.
Something like this?
$('.hide').parents().children('.boxClass').fadeOut();
.children() only travels a single level down the DOM tree. Use find():
$('.hide').parents().find('.boxClass').fadeOut();
Related
<div class="col-1-3">
<div class="click"></div>
</div>
<div class="col-1-3">
</div>
<div class="col-1-2">
</div>
Using jQuery, I need to select the col-1-2 div when a user clicks on the "click" div. I need to replace col-1-2 with col-1-3. So far, I have tried a variety of methods using parent();, next();, find(); etc. etc. Right now, I looking into:
$(".click").parent().next(".col-1-2").removeClass("col-1-2").addClass("col-1-3");
That obviously doesn't work but I am not sure where to go from here.
next will only look at the immediate next element. You need to use nextAll to test all the following siblings.
Using this instead of a selector will make sure that you are dealing with the div that was actually clicked rather than another one with the same class name.
$(this).parent().nextAll(".col-1-2").removeClass("col-1-2").addClass("col-1-3");
You may also wish to filter the results to apply the change to only the first match.
One more slightly shorter version:
$(this).parent().siblings(".col-1-2").toggleClass("col-1-2 col-1-3");
$.fn.toggleClass can be used instead or combination of removeClass + addClass: col-1-2 will be removed and col-1-3 will be added.
Here's the deal: I need to look up for an element, on a list of others HTMLElements, for the next one that has the class '.wanted-class'. I fire/capture a click event in one of the elements from the same class. I ended up with a solutions that looks like this:
$('#id-element-0000').nextAll('.wanted-class');
This should return a list of all the elements that belongs to this class that are after the one I clicked. Something like this:
<div class="wanted-class" id="id-element-1111" data-wanted="6127">…</div>
<div class="wanted-class" id="id-element-2222" data-wanted="6128">…</div>
<div class="wanted-class" id="id-element-3333" data-wanted="6129">…</div>
<div class="wanted-class" id="id-element-4444" data-wanted="6130">…</div>
But, I only want the first one. I don't need the others. So I came up (AKA: found on google) a solution that was simply:
$('#id-element-0000').nextAll('.wanted-class')[0];
This obviously return this:
<div class="wanted-class" id="id-element-1111" data-wanted="6127">…</div>
That solves the first element problem. But, I can't access the data-wanted attribute on the element. Something like:
$('#id-element-0000').nextAll('.wanted-class')[0].attr('data-wanted');
...or...
$('#id-element-0000').nextAll('.wanted-class')[0].data('wanted');
...simply don't work. And I don't seem to be able to put it into a variable too.
QUESTION: does anyone know how to retrieve the data-wanted attribute from the first element from this list?
UPDATE
Obviously, the better way of doing it was to use next intead of nextAll, BUT I have others elements between elements from this same class. So, next function doesn't apply in this case. And, YES... I've tried.
Wrap it with $() to convert it to jQuery object:
$($('#id-element-0000').nextAll('.wanted-class')[0]).attr('data-wanted');
Or simply use
$('#id-element-0000').nextAll('.wanted-class').first().attr('data-wanted');
When you index over jQuery objects, you will get HTMLElement which doesn't have methods that jQuery has.
You are accessing the first element in the jQuery wrapper set. You should convert it to jQuery object again, or get the first item with .eq method which return jQuery object:
$('#id-element-0000').nextAll('.wanted-class').eq(0).attr('data-wanted');
jsFiddle Demo.
Here is a part of my html. (it is written using ejs)
<div class="objAddDiv">
<tr><td><button class="addObj">Do this action</button></td></tr>
<table><div class="objects"></div></table>
</div>
I have several objAddDiv divs on this page. Each has the same structure inside of it. I use .append() to add more ejs to .objects. I am having a hard time adding to only the .objects div that is inside of the same div as the button. I tried doing the following
".addObj click": function(el, element){
$(".addObj").closest(".objAddDiv").find(".objects").append(//my ejs utility here)
}
The problem is that $(".addObj").closest(".objAddDiv") returns all .objAddDiv on the page. I have looked at the jquery documentation for .closest and it says closest should only return one element. Is there a better way to do this? What am I doing wrong. (these are not my real class names btw)
It's because you are calling that method on every element with a class of 'addObj':
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
So you get the closest objAddDiv to each addObj element.
Assuming you are doing this inside the click event of the button use this to get the correct element:
$(this).closest(".objAddDiv").find(".objects").append(//my ejs utility here)
Here is the answer that I figured out (for anyone who comes next) I needed to use the element I passed into the function:
el.closest(".objAddDiv").find(".objects").append(//ejs append stuff)
I know the title sounds quite easy but the real problem is the markup. I have a link in a div which also in another div but the textarea and the paragraph are in another div so that's why I am having problem on how to show and hide elements in a completely different markuped div from a completely different markuped div.
I saw .parent() and .children() and .siblings(). But they couldn't help me or I think that I was not able to take help of those.
Here's the fiddle.
Here is the JS I tried:
$(".no_link").click(function(e) {
e.preventDefault();
});
$(".edit_offer").on('click', function() {
$(this).parent().parent().siblings().children("textarea").toggle();
});
You can use these selectors, but it will rely on the class username being in the heirarchy as you have in your code:
$(".edit_offer").on('click', function () {
$(this).closest('.username').find("textarea").toggle();
});
jsFiddle example
.closest() will traverse up the DOM until it hits the element with class username, then .find() will go down through the children looking for the textarea.
I did it using find(). http://jsfiddle.net/SZUT8/2/ To make the script more accurate and future-proof you could consider adding a class to the paragraph and matching it, as in here: http://jsfiddle.net/SZUT8/4/
You could always assign an ID (or a class, for multiple) to each of the desired elements ("p" and "textarea" in your case). Then use your ID/class to reference them for the show() or hide() methods, rather than navigating the DOM via parent(), sibling() and children().
Then your click handler will only need the line:
$('#idOfElement).toggle();
Basically I need to grab the first child of a parent element, usually but not limited to an <iframe>.
<div>
<iframe src="www.asource.com">GRAB THIS AFTER A BUTTON IS CLICKED</iframe>
</div>
I have tried the following
$("#parent").eq(0).prop("tagName");
$("#parent").first().prop("tagName");
$("#parent:first").prop("tagName");
$("#parent:nth-child(1)").prop("tagName");
$("#parent:lt(1)").prop("tagName");
All of these return a "div" when I alert them. The reason I am getting the prop name was because I wanted to use the find() to get the element.
$("parent").find(ONE OF THE PROP CALLS ABOVE).animate({.....
because when I do:
$("parent").find('**iframe**').animate({.....
that is the only scenario that I can grab and properly animate an iframe.
however since we don't know if the first child is an iframe or not, i used .prop() to get the first element tag name and find it.
(please note, i tried all the above attempts directly with .animate(...) instead of .prop(...) but that also didn't grab the iframe.
Would really appreciate some guidance
You need find the first child so
$("#parent").children().first().prop("tagName");
$("#parent > :first-child").prop("tagName");
$("#parent > :eq(0)").prop("tagName");
Assuming you are using the correct parent selector - the above code assumes the parent element has the id parent like
<div id="parent">
<iframe src="www.asource.com">GRAB THIS AFTER A BUTTON IS CLICKED</iframe>
</div>