Question

我需要在每个img的链接中包含div。我面临的问题是每个div都包含相同的图像。我需要在每个img的特定链接中包含特定的div。

我正在使用的代码：

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

启动代码：

<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>

需要的结果代码：

<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>

Answer 1

您可以移动元素：

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

Answer 2

试试这个......

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

注意使用this来引用each函数调用中的div。

我还添加了empty()来清除锚元素的跨度，因为它没有显示在所需的结果中。

Answer 3

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

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

它可以被压缩一点，但希望这样很清楚它在做什么。将它们全部粘在一起，并在一击中完成：

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

Answer 4

您使用的选择器不够具体。代码将按原样选择文档中具有类a的第一个lightview元素，并将其包装在文档中具有类img的第一个euImg周围。

如果我没有弄错的话，你要做的就是将这些操作应用到每个div的孩子身上。试试这个：

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

为了删除元素，detach()是必需的，因此您无法获得副本。请参阅find和children上的文档。

在每个div的链接中包装IMAGE

4 个答案: