使用jQuery

Question

使用这样的HTML：

<div class="content">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
</div> 

使用这样的jQuery，它将在第一段之后附加Click Here HTML：

var $this = $(this);

$this.append('<div id="link" class="link">Click Here/div>');

但是，我需要使用this answer中的p:nth-child(2)在第二段之后附加HTML

尝试了以下操作，但不起作用：

$this('.content p:nth-child(2)').append('<div id="link" class="link">Click Here</div>');

编辑：

 $('.content').each(function() {

    var $this = $(this);

    $this.append('<div id="link" class="link">Click Here</div>');

    $this.children('p:not(:first-child)').wrapAll('<div class="text" />');

} 

并将所有其余段落包装在div文本中（不包括前2个段落）

Answer 1

您的选择器不正确。您需要按如下方式使用after()：

$(function() {

  $('.content').each(function() {
    var $this = $(this);
  
    $this.children('p:nth-child(2)').append('<div id="link" class="link">Click Here</div>');

    $this.children('p:not(:first-child)').wrapAll('<div class="text" />');

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
</div>

Answer 2

我假设您正在遍历.content元素，因为它们有多个实例。这是没有必要的，因为如果选择器包含元素集合，则jQuery会自动为您执行此操作。然后，您只需调用append()，即可将内容添加到所需位置。试试这个：

$('.content p:nth-child(2)').append('<div id="link" class="link">Click Here</div>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
</div> 
<div class="content">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
</div>

Answer 3

我写了一部分代码进行演示。查看以下代码：

$.each($('.content p'), function (index, paragraph) {
    if (index == 1) { //second element
      $(paragraph).append('<div>some text</div>');
    }
});

工作中的jsFiddle： CLICK!