insertAfter within a loop
I have some code generated by a CMS:
<div class="block">
<a class="link" href="#">Link</a>
<h4>Header here</h4>
<div class="text">Some text here</div>
</div>
and I need to move the link to after the text div. I have tried this:
$(document).ready(function() {
$('.block开发者_如何学JAVA').each(function() {
$('.block a.link').insertAfter('.block div.text');
});
});
but this only results in links being repeated about 10 times (the number of times looped.
I tried using $(this) but I don't quite understand how to write the correct syntax to append the a.link within the function... like this:
$(this).a.link.insertAfter($(this).div.text);
Something like this should work, using siblings
and after
:
$('.block a.link').each(function() {
$(this).siblings('.text').after(this);
});
That says "for each element matched, find the element that matches .text
and insert the original element after it".
Alternatively, you could do this:
$('.block a.link').each(function() {
$(this).parent().append(this);
});
This presumes that you want to put the element at the end of the div.block
.
You could do (if you want it after the div with class text):
$(document).ready(function() {
$('.block a').each(function(){
$(this).next('div.text').after(this);
});
});
or (if you want it after the div with class block)
$(document).ready(function() {
$('.block a').each(function(){
$(this).closest('div.block').after(this);
});
});
Try this:
$(document).ready(function() {
$('.block').each(function() {
var divtext = $('div.text', this)
$('a.link', this).insertAfter(divText);
});
});
Try this
$('div.block a.link').each(function() {
$(this).siblings('div.text').after(this);
});
精彩评论