Question

您好我一直在使用jQuery包装元素，直到现在一切正常但我仍然试图找到包含＆lt;的方法一个类=＆＃34; pinterest-anchor＆＃34; 进入＆lt; div class =＆＃34; wrapMe＆＃34; 。

现在我明白了：

<div class="wrapPinImg">
    <a href="#" class="pinterest-anchor">
        <i class="fi-social-pinterest"></i>
    </a>
    <div class="wrapMe">
        <img src="img.png" class="wrapMe" />
    </div>
</div>

我需要这个（包含类：pinterest-anchor 里面 .wrapMKe）：

<div class="wrapPinImg">
    <div class="wrapMe">
        <a href="#" class="pinterest-anchor">
            <i class="fi-social-pinterest"></i>
        </a>
        <img src="img.png" class="wrapMe" />
    </div>
</div>

＆＃34;或多或少＆＃34;代码理念：

$(".wrapPinImg img").each(function() {
    $(this).parent(".wrapMe").closest("a").find(".pinterest-anchor").appendTo(".wrapMe");
});

/ ********************************************** ******** /

为了更好地了解我在这里尝试做的事情是完整的事情：

/*HTML*/        
<div class="wrapPinImg">
            <a href="#" class="pinterest-anchor">
                <i class="fi-social-pinterest"></i>
            </a>
            <img src="img.png" class="wrapMe" />
        </div>
/*JQUERY*/    
    $(".wrapPinImg img").each(function() {
        var floatStyle = $(this).attr('style');
        $(this).attr('style', '');
        $(this).wrap('<div class="wrapMe"></div>');
        /* $(this).parent(".wrapMe").closest("a").find(".pinterest-anchor").appendTo(".wrapMe"); -- HERE THE PROBLEM*/
        $(this).parent(".wrapMe").attr('style', floatStyle );
    });

非常感谢!!!

Answer 1

您可以迭代anchor元素并将其添加到紧随其后的兄弟元素中。

jQuery(function($) {
  $(".wrapPinImg > a.pinterest-anchor").each(function() {
    $(this).prependTo($(this).next(".wrapMe"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapPinImg">
  <a href="#" class="pinterest-anchor">
    <i class="fi-social-pinterest"></i>
  </a>
  <div class="wrapMe">
    <img src="img.png" class="wrapMe" />
  </div>
</div>

参考

.next()

获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。
.prependTo()

将匹配元素集中的每个元素插入目标的开头。

Answer 2

使用next()的组合来选择下一个元素，使用prepend()将元素移动到下一个元素（wrapMe）

＆＃13;

$('.pinterest-anchor').each(function(){
$(this).next().prepend($(this));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="wrapPinImg">
    <a href="#" class="pinterest-anchor">
        <i class="fi-social-pinterest"></i>
    </a>
    <div class="wrapMe">
        <img src="img.png" class="wrapMe" />
    </div>
</div>

＆＃13;

或使用next()代替siblings()函数：

＆＃13;

$('.pinterest-anchor').each(function(){
$(this).siblings('.wrapMe').prepend($(this));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="wrapPinImg">
    <a href="#" class="pinterest-anchor">
        <i class="fi-social-pinterest"></i>
    </a>
    <div class="wrapMe">
        <img src="img.png" class="wrapMe" />
    </div>
</div>

＆＃13;

获取最接近父级的元素并将其包含在内部--jquery

2 个答案: