I want to append some text after 2 closing divs to a sector element.
Click me
</div>
</div>
// this is where I want to append the text
My code appends the text after the link. How can I say "append it after the 2nd closing div"?
$('a.thingIClicked').click(function() {
$(this).append('hello');
});
The most direct way to do this is to find the second parent <div> element, and then insert the text after it.
$('a.thingIClicked').click(function() {
$(this).parent("div").parent("div").after("some text");
});
This will insert the text on the outside of the second <div> parent. Using append() will put the text on the inside of the parent, which from your example doesn't appear to be what you want.
There's probably a more elegant solution, but how about:
$('a.thingIClicked').click(function() {
$(this).parent().parent().after('hello');
});
Edit: #Zack is correct (and should probably get the answer credit for this one) - my original code would have added the text into the second enclosing div, rather than after it. I've edited my code above accordingly.
The easiest way would be to give the outer div an id and then use $("#outerdivid").
EDIT: Below will not work, but leaving it here for reference
However, you should also be able to use a jquery :parent filter:
http://api.jquery.com/filter/
$('a.thingIClicked').filter(':parent').filter(':parent').click(/**/);
Use .insertAfter()
http://api.jquery.com/insertAfter/
<div class="container">
<h2>Greetings</h2>
<div>Hello</div>
<div class="inner">Goodbye</div>
</div>
We can create content and insert it after several elements at once:
$('<p>Test</p>').insertAfter('.inner');
Use .insertAfter() - http://api.jquery.com/insertAfter/
<div class="container">
<h2>Greetings</h2>
<div>Hello</div>
<div class="inner">Goodbye</div>
</div>
We can create content and insert it after several elements at once:
$('<p>Test</p>').insertAfter('.inner');
Related
I am using jQuery. I have the following html fragment:
<h1>Main Title</h1>
<h2>One header</h2>
<p>some text</p>
<p>more text</p>
<ul><li>a list</li></ul>
<h2>Another header</h2>
one link
<h3>ddd</h3>
<p>eee</p>
<h2>Header 3<h2>
<p>This is a Paragraph</p>
I need to get the content that is between every h2 element, in order to do something like this:
First Section text
some text
more text
Second section text
one link
ddd
eee
Third section text
This is a Paragraph
I've read this resource:
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
but still cannot figure how to do what I need.
Thanks in advance!
I'd suggest the following:
$('h2').each(function(){
var self = $(this),
// gets everything between the $(this) and the next 'h2' element:
contents = self.nextUntil('h2'),
/* creates a new div with which to wrap,
and inserts after the current $(this): */
newWrap = $('<div />').insertAfter(self);
// appends the contents to the new div element:
newWrap.append(contents);
});
JS Fiddle demo.
While the above works, for its intended use, and illustrates nextUntil() (which is definitely the method to use in this scenario), I'm unsure how I might show you how to achieve your aims, since you seem to have left your use-case/requirements rather vague.
References:
append().
each().
insertAfter().
nextUntil().
I believe the nextUntil method is what you're looking for.
http://api.jquery.com/nextUntil/
A good solution would be to put the content you wish to retrive in a <div> tag with an id, and use jQuery to retrive it's content like so: $('#divid').text()
I am trying to figure out how to find an element that is NOT inside specific parent. Here is a sample html:
<div class="id01">
<p>some text</p>
</div>
<p>some more text</p>
<p>some more more text</p>
Ok, now I need to find a first paragraph that is not inside parent #id01 and that is where I am getting lost. I started to do it like that
$('p:first').text(); //this way i would get the P inside DIV but I want to skip that one and count on next one that has no parent #01
Hope i made it clear.
You could easily use the :not() selector for that, in combination with :first .
$("p:not(.id01 p):first").text()
JSFiddle.
Solution 1 :
$('p').not('.id01 *').eq(0)
Solution 2 :
$('p').filter(function(){ return $(this).closest('.id01').length==0 }).eq(0)
Very simple way, as suggest by adamb all this stuff is on the jQuery site, but here
$("p:first").not($(".id01 p"));
Should give you what you want.
you could use the .next() selector
$("div.id01").next('p')
Use eq() for the index of <p>
console.log($('p').eq(1).text()); //some more text
console.log($('p').eq(2).text()); //some more more text
I am struggling with this piece of code for the last few hours now.
Hopefully you can help me :)
What I try to achieve:
Find an element.
Insert html after the element that follows the elment found in (1).
Here's my HTML:
<div class="paragraph" data-template="1" data-id="1"></div>
<div class="icons"></div>
I want to insert after the element with the "icons" class, so I try:
$(data).insertAfter('.paragraph').find('[data-id="'+appendAfter+'"]').next('.icons');
.. where $(data) is a HTML string
That fails.
If I remove the next() function, it inserts before icons, but that is not what I want:
$(data).insertAfter('.paragraph').find('[data-id="'+appendAfter+'"]');
So finding the element works, but not skipping the element after that and then insert.
Cheers,
Robert
since you are looking for next , hopping the div.paragraph is closing like this
<div class="paragraph" data-template="1" data-id="1"> ..something.. </div>
<div class="icons">
if so correcting your code only
$(data).insertAfter($('.paragraph[data-id="'+appendAfter+'"]').next('.icons'));
or if div.paragraph is parent of div.icons, means not closing like above do it as
$(data).insertAfter($('.paragraph[data-id="'+appendAfter+'"]').find('.icons'));
Try this:
If the .paragraph element is the parent of .icons then next() won't work as that looks for sibling elements. You need to use find() to get the child element:
$('.paragraph[data-id="' + appendAfter + '"]').find('.icons').after(data);
I think what you want is:
$(".paragraph").next().after(data)
You might need to consider what data is - is it html, or an element?
Is this what you mean?
$('.paragraph').next('.icons').after(data);
Hi guys lets say I have the following html:
<div class="owner">
<div>
click
</div>
</div>
<div class="owner">
<div>
click
</div>
</div>
I want to put code in the onclick handler so it results in selecting the element of class 'owner' which encloses it - so I don't have to refer to the parent element by typing in this.parentNode.parentNode etc
I'd appreciate if theres a way to do it using selectors from both prototype and jquery.
$().parents(<selector>) is your friend
$(a).click(function() {
$(this).parents(".owner").css("background-color", "yellow");
})
example
Why not use this.parentNode.parentNode? If the structure is fixed, this will be faster and more efficient.
If the structure is not fixed, a jQuery way would be something like:
$(this).parentsUntil (".owner").filter (".owner");
i have 2 main div:
<div id="div1">
<div id="minidiv1">a</div>
<div id="minidiv2">b</div>
</div>
<div id="div2"></div>
I want move the minidiv1 into the div2 with jquery
how can i do?
You can simply append it to the div2, and it will change its location in the DOM:
$('#minidiv1').appendTo('#div2');
// or
$('#div2').append('#minidiv1');
The difference of the above two lines is what is returned, appendTo returns the #minidiv element, append will return the #div2 element.
Use the one you find most useful if you want to make more actions (by chaining).
$('#minidiv1').appendTo('#div2');
or
$('#div2').append($('#minidiv1'));
$("#minidiv1").appendTo("#div2")
Luca, did Paul's answer actually work for you? I think you need to be referencing the jQuery object like so:
$($('#minidiv1')).appendTo('#div2');
// or
$('#div2').append($('#minidiv1'));
Otherwise, jQuery will just append the string "#minidiv1" to #div2, rather than moving your existing div.