Question

我将图像中的标签包装到Div标签。它没有问题。但是a标签不包含当前的Div。每个Div都是相同的标签。

这是我的HTML

<div class="link-container">
    <div class="content-inner">
        <h1>headline</h1>
        <p>Copy</p>
    </div>
    <div class="image-inner">
        <figure class="image_container float_above">
            <a href="index.php/home.html">
                <img src="http://placehold.it/350x150">
            </a>
        </figure>
    </div>
</div>
<div class="link-container">
    <div class="content-inner">
        <h1>headline</h1>
        <p>Copy</p>
    </div>
    <div class="image-inner">
        <figure class="image_container float_above">
            <a href="index.php/home2.html">
                <img src="http://placehold.it/350x150">
            </a>
        </figure>
    </div>
</div>
<div class="link-container">
    <div class="content-inner">
        <h1>headline</h1>
        <p>Copy</p>
    </div>
    <div class="image-inner">
        <figure class="image_container float_above">
            <a href="index.php/home3.html">
                <img src="http://placehold.it/350x150">
            </a>
        </figure>
    </div>
</div>

这是输出：

<a href="index.php/home.html"><a><a><div class="link-container">
    <div class="content-inner">
        <h1>headline</h1>
        <p>Copy</p>
    </div>
    <div class="image-inner">
        <figure class="image_container float_above">

        <img src="http://placehold.it/350x150"></figure>
    </div>
</div></a></a></a>

<a href="index.php/home.html"><a><a><div class="link-container">
    <div class="content-inner">
        <h1>headline</h1>
        <p>Copy</p>
    </div>
    <div class="image-inner">
        <figure class="image_container float_above">

        <img src="http://placehold.it/350x150"></figure>
    </div>
</div></a></a></a>

但我想把它作为输出

<a href="index.php/home.html"><div class="link-container">
    <div class="content-inner">
        <h1>headline</h1>
        <p>Copy</p>
    </div>
    <div class="image-inner">
        <figure class="image_container float_above">

        <img src="http://placehold.it/350x150"></figure>
    </div>
</div></a>

<a href="index.php/home2.html"><div class="link-container">
    <div class="content-inner">
        <h1>headline</h1>
        <p>Copy</p>
    </div>
    <div class="image-inner">
        <figure class="image_container float_above">

        <img src="http://placehold.it/350x150"></figure>
    </div>
</div></a>

jQuery脚本

$('.image_container').each(function () {
    var myFigure = $(this);
    var myAnchor = $(myFigure).find('a');
    var myImage = $(myAnchor).find('img');
    var newImage = $(".link-container");
    console.log(myFigure);
    $(myFigure).append(myImage).before(myAnchor);   
    var href = $(myAnchor).attr('href');    
    $('.image-inner a').remove();   
    $(".link-container").wrap($("<a/>").attr("href", href));

});

小提琴链接：http://jsfiddle.net/db63f0zh/47/

我想要以下内容：link1到div1，link2到div2 ......

Answer 1

我认为它可以像

一样简单

$('.link-container').each(function () {
    var $this = $(this),
        $imgct = $(this).find('.image_container');
    $imgct.append($imgct.find('img'));
    $(this).wrap($(this).find('.image_container a'))
});

演示：Fiddle

在您的某些选择器中，您没有使用问题上下文。

Answer 2

我认为这应该对你有用

$('.link-container').each(function(){
   var href = $(this).find('.image-inner a').attr('href'); //Get the href of anchor in image-inner
   $(this).find('.image-inner a img').unwrap(); //remove the parent of img in image-inner
   $(this).wrap('<a href="'+href+'"></a>'); //wrap the whole div in anchor
})

DEMO

注意：假设你需要包装所有3个div。

Answer 3

因为您的代码引用了文档中的所有元素。

$('.image-inner a').remove();   
$(".link-container").wrap($("<a/>").attr("href", href));

使用此代替来引用image_container的子级和父级

$(this).find('.image-inner a').remove();   
$(this).parents(".link-container").wrap($("<a/>").attr("href", href));

设置<a> tag to the current <div></div></a>

3 个答案: