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，否则选择 all .redirect-link s将被选择并附加到当前.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>');
})

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

2 个答案: