javascript - 如何将每个兄弟元素附加到jQuery中的兄弟元素？

Question

我在 wordpress 中有 div，每个 div 都有一个<ul></ul>

<div class="list-item">
    <div class="elimore_trim">
    Lorem ipsum
    </div>
    <ul class="hyrra-forrad-size-list">
    <li>Hyra 1</li>
    <li>Content 1</li>
    </ul>
</div>

<div class="list-item">
    <div class="elimore_trim">
    Lorem ipsum
    </div>
    <ul class="hyrra-forrad-size-list">
    <li>Hyra 2</li>
    <li>Content 2</li>
    </ul>
</div>

我想将每个附加class="hyrra-forrad-size-list"到它的兄弟姐妹class="list-item"

我当前的 jquery 代码如下所示：

var j = jQuery.noConflict();

j(function() {
  j('.list-item .hyrra-forrad-size-list').each(function() {
    j(this).appendTo('.elimore_trim');
  });
});

我上面的代码的问题是所有具有该类的元素都hyrra-forrad-size-list被插入到具有一个类的每个元素中elimore_trim

例如：

<div class="list-item">
    <div class="elimore_trim">
    Lorem ipsum
    </div>
    <ul class="hyrra-forrad-size-list">
    <li>Hyra 1</li>
    <li>Content 1</li>
    </ul>

    <ul class="hyrra-forrad-size-list">
    <li>Hyra 2</li>
    <li>Content 2</li>
    </ul>

</div>

<div class="list-item">
    <div class="elimore_trim">
    Lorem ipsum
    </div>
    <ul class="hyrra-forrad-size-list">
    <li>Hyra 1</li>
    <li>Content 1</li>
    </ul>

    <ul class="hyrra-forrad-size-list">
    <li>Hyra 2</li>
    <li>Content 2</li>
    </ul>
</div>

你知道我怎样才能把班级只转移hyrra-forrad-size-list到自己的兄弟姐妹身上吗？任何想法都值得赞赏。谢谢

标签： javascriptphpjqueryhtmlwordpress

Answer 1

虽然.appendTo()两者.append()的工作原理相同，但它们的语法有点不同。

.appendTo()将匹配元素集中的每个元素插入到目标的末尾，例如

$(element_to_be_append).appendTo(append_to_this);

.append() 将参数指定的内容插入到匹配元素集中每个元素的末尾，例如

$(append_to_this).appendTo(element_to_be_append);

将 定位parent()到find()要附加的元素特定元素。

使用.appendTo()：

var j = jQuery.noConflict();

j(function() {
  j('.list-item .hyrra-forrad-size-list').each(function() {
    j(this).parent().find('.elimore_trim').appendTo(j(this));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-item">
    <div class="elimore_trim">
    Lorem ipsum
    </div>
    <ul class="hyrra-forrad-size-list">
    <li>Hyra 1</li>
    <li>Content 1</li>
    </ul>
</div>

<div class="list-item">
    <div class="elimore_trim">
    Lorem ipsum
    </div>
    <ul class="hyrra-forrad-size-list">
    <li>Hyra 2</li>
    <li>Content 2</li>
    </ul>
</div>

使用.append()：

var j = jQuery.noConflict();

j(function() {
  j('.list-item .hyrra-forrad-size-list').each(function() {
    j(this).append(j(this).parent().find('.elimore_trim'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-item">
    <div class="elimore_trim">
    Lorem ipsum
    </div>
    <ul class="hyrra-forrad-size-list">
    <li>Hyra 1</li>
    <li>Content 1</li>
    </ul>
</div>

<div class="list-item">
    <div class="elimore_trim">
    Lorem ipsum
    </div>
    <ul class="hyrra-forrad-size-list">
    <li>Hyra 2</li>
    <li>Content 2</li>
    </ul>
</div>