时间戳

首页 > 解决方案 > 将多个元素附加到其他元素 jQuery JavaScript

javascript - 将多个元素附加到其他元素 jQuery JavaScript

问题描述

我有 7 个带有类名的段落元素catalogue-description，每个元素都有一个带有类名的段落兄弟redirect-link。

我正在尝试将元素附加redirect link到catalogue-description元素。结果应该是对于每个catalogue-description，都有一个redirect link元素作为其子元素。

但是，当我运行我的代码时，7 个元素中只有 1 个catalogue-description将附加所有 7 个redirect link元素，而不是每个元素一个。

这是我的代码：

HTML：

<p class="catalogue-description">LOREM IPSUM.</p>
<p class="redirect-link"> 
    HELLO
</p>

jQuery :

jQuery(".catalogue-description").each(function(){
    jQuery(this).append(jQuery(".redirect link"));
})

期望的结果：

    <p class="catalogue-description">
        LOREM IPSUM.
        <p class="redirect-link"> 
            HELLO
       </p>
    </p>

    <p class="catalogue-description">
        LOREM IPSUM.
        <p class="redirect-link"> 
            HELLO
       </p>
    </p>

标签： javascriptjquerywordpress

解决方案

您需要选择正在迭代的 current.redirect-link的兄弟，否则将选择所有s 并将其附加到 current 。用于获取下一个兄弟：.catalogue-description .redirect-link.catalogue-description.next()

jQuery(".catalogue-description").each(function(){
    const $this = jQuery(this);
    $this.append($this.next());
})


jQuery(".catalogue-description").each(function() {
  const $this = jQuery(this);
  $this.append($this.next());
})
body > p {
  border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="catalogue-description">LOREM IPSUM.</p>
<p class="redirect-link">
  HELLO
</p>
<p class="catalogue-description">LOREM IPSUM.</p>
<p class="redirect-link">
  HELLO
</p>

推荐阅读