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

Question

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

我试图将redirect link元素附加到catalogue-descriptionelements。结果应该是每个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的兄弟，否则将选择所有.redirect-links并将其附加到当前的.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>

Answer 2

$(".catalogue-description").each(function(){
   $(this).append('<p class="redirect-link">HELLO</p>');
})