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

Question

我有 7 个类名为 catalogue-description 的段落元素，每个元素都有一个类名为 redirect-link 的段落同级元素。

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

但是，当我运行代码时，7 个 catalogue-description 中只有 1 个会附加所有 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>

Answer 1

您需要选择 .redirect-link，它是正在迭代的当前 .catalogue-description 的同级，否则 < em>所有 .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>