1

我需要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>
4

4 回答 4

1

您可以移动元素：

$("div.level_1 img").each(function() {
   $(this).next('h4').find('a').empty().append(this);
   // $(this).next('h4').find('span').replaceWith(this);
});
于 2013-09-26T12:34:23.043 回答
0

您使用的选择器不够具体。代码将选择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的文档。

于 2013-09-26T12:53:47.577 回答
0

尝试这个...

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

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

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

于 2013-09-26T12:34:01.340 回答
0 
$('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'));
});
于 2013-09-26T12:43:41.803 回答