Question

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);
    });
});
Was it helpful?

Solution

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

OTHER TIPS

Try the following code

$(document).ready(function ($) {
    $('h4.post-title').each(function () {
        $(this).parents('li').find('a.view').append(this);
    });
});

js fiddle: http://jsfiddle.net/TLC9r/3/

Here is the working example of your fiddle:

Working Demo

 jQuery(document).ready(function ($) {
    $('.post-title').each(function () {
   var obj = $(this).parents('li').find('a.view');
        $(obj).append(this);
        alert($(obj).html());
    });
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top