I have the following HTML
<li class="post" style="width: 621px;">
<div class="mediaholder">
<div class="mediaholder_innerwrap overlay cap-icon enlarge">
<a href="#" class="view" data-rel="lightbox" rel="lightbox">
<img width="440" height="330" src="#" class="attachment-portfolio-index wp-post-image">
</a>
</div>
</div>
<div class="detailholder">
<h4 class="post-title"><a href="#">Example Title One</a></h4>
</div>
</div>
</li>
<li class="post" style="width: 621px;">
<div class="mediaholder">
<div class="mediaholder_innerwrap overlay cap-icon enlarge">
<a href="#" class="view" data-rel="lightbox" rel="lightbox">
<img width="440" height="330" src="#" class="attachment-portfolio-index wp-post-image">
</a>
</div>
</div>
<div class="detailholder">
<h4 class="post-title"><a href="#">Example Title Two</a></h4>
</div>
</div>
</li>
I'm trying to move the .post-title
class inside the a.view
class within each li
using this jQuery
jQuery(document).ready(function ($) {
$('.post-title').each(function () {
$(this).parents('li').next('a.vew').append(this);
});
});
For each post-title
I take it and append it to the parent li a.view but it's not working.
I tried the below which appends the post-title
inside the mediaholder
, i'm having trouble getting this class into the a.view
class. This is what i've got working http://jsfiddle.net/Zn6Eq/1/ if you can fork / update i'd really appreciate it.
jQuery(document).ready(function ($) {
$('.post-title').each(function () {
$(this).parents('li').children('.mediaholde').append(this);
});
});
You have few problems like a typo in class name vew
also it is a descendant of li
so need to use find()
not next()
jQuery(document).ready(function ($) {
$('.post-title').each(function () {
$(this).closest('li').find('a.view').append(this);
});
});
Demo: Fiddle