CODEWITHSUNDEEP
jqueryhtml
octogone.dev
octogone.dev

Reputation: 133

wrap an IMG in a link in each div

I need to wrap an img in a link in each div. The problem I am facing is that the same image is wrapped in each div. I need to wrap the specific img in the specific link of each div.

CODE I am using:

$("div.level_1").each(function() {
    $("a.lightview").wrapInner($("img.euImg"));
});

STARTING CODE: 

<div class="level_1 euItem group3 generation_y _2012">
    <img border="0" src="img1.jpg" class="euImg" alt="Run">
    <h4>
        <a href="/sport/sport_2014/media_gallery/images/run.htm" class="lightview" data-lightview-group-options="controls: 'thumbnails'">
            <span>Run</span>
        </a>
    </h4>

    <p>Praesent placerat purus in lobortis egestas. Etiam lectus augue, viverra in ultricies vitae, accumsan eu arcu. Phasellus auctor fringilla sem non imperdiet.</p>
    <span class="clear">&nbsp;</span>
</div>

<div class="level_1 euItem group3 generation_y _2012">
    <img border="0" src="img2.jpg" class="euImg" alt="Run">
    <h4>
        <a href="/sport/sport_2014/media_gallery/images/bike.htm" class="lightview" data-lightview-group-options="controls: 'thumbnails'">
            <span>Run</span>
        </a>
    </h4>

    <p>Praesent placerat purus in lobortis egestas. Etiam lectus augue, viverra in ultricies vitae, accumsan eu arcu. Phasellus auctor fringilla sem non imperdiet.</p>
    <span class="clear">&nbsp;</span>
</div>

RESULT CODE NEEDED:

<div class="level_1 euItem group3 generation_y _2012">
    <h4>
        <a href="/sport/sport_2014/media_gallery/images/run.htm" class="lightview" data-lightview-group-options="controls: 'thumbnails'">
            <img border="0" src="img1.jpg" class="euImg" alt="Run">
        </a>
    </h4>
    <p>Praesent placerat purus in lobortis egestas. Etiam lectus augue, viverra in ultricies vitae, accumsan eu arcu. Phasellus auctor fringilla sem non imperdiet.</p>
    <span class="clear">&nbsp;</span>
</div>

<div class="level_1 euItem group3 generation_y _2012">
    <h4>
        <a href="/sport/sport_2014/media_gallery/images/bike.htm" class="lightview" data-lightview-group-options="controls: 'thumbnails'">
            <img border="0" src="img2.jpg" class="euImg" alt="Run">
        </a>
    </h4>
    <p>Praesent placerat purus in lobortis egestas. Etiam lectus augue, viverra in ultricies vitae, accumsan eu arcu. Phasellus auctor fringilla sem non imperdiet.</p>
    <span class="clear">&nbsp;</span>
</div>

Upvotes: 1

Views: 98

Answers (4)

jeteon
jeteon

Reputation: 3719

The selectors you're using aren't specific enough. The code, as it is will select the first a element in the document with the class lightview and wrap it around the first img with class euImg in the document.

If I'm not mistaken, what you're trying to do is apply those operations to the children of each respective div. Try this instead:

var img;
$('div.level_1').each(function() {
    img = $(this).children('img.euImg').detach();
    $(this).find('a.lightview').wrapInner(img);
});

The detach() is necessary in order to remove the element so you don't get copies. See the documentation on find and children.

Upvotes: 0

Jason
Jason

Reputation: 2331

$('div.level_1').each(function () {
    var $div = $(this);
    var $img = $div.find('img.euImg');
    var $span = $div.find('a.lightview span');

    $span.replaceWith($img);
});

It could all be compressed a little, but hopefully this way it's quite clear what it's doing. Sticking it all together and doing it in one hit:

$('div.level_1').each(function () {
    $(this).find('a.lightview').empty().append($(this).find('img.euImg'));
});

Upvotes: 0

Ram
Ram

Reputation: 144659

You can move the element:

$("div.level_1 img").each(function() {
   $(this).next('h4').find('a').empty().append(this);
   // $(this).next('h4').find('span').replaceWith(this);
});

Upvotes: 1

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

Try this...

$("div.level_1").each(function() {
    $(this).find("a.lightview").empty().wrapInner($(this).find("img.euImg"));
});

Notice the use of this to refer to the div within the each function call.

I also added empty() to clear the span out of the anchor element, as that's not shown in the desired results.

Upvotes: 0

Related Questions