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转移到它自己的兄弟姐妹中？任何想法表示赞赏。谢谢

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>

如何将每个同级元素附加到jQuery中的同级元素？

1 个答案: