Question

这样做的目的不是重新设计我的html或使用不同的css选择方法。那么这个目标就是：

使用jQuery：

找到包含＆＃34; Walnuts＆＃34;

<span>

获取父元素<p>
在该元素后插入新的<p><span>...。

我没有找到一种不同的方式来插入＆＃34; Cashews＆＃34;核桃后。我只是在寻找上面提到的程序。

这是一个小提琴 - ＆gt; http://jsfiddle.net/V3ucA

HTML：

<div class='master'>
  <div class='big1'>
    <p class='medium1'>
        <span>Peanuts</span>
    </p>
    <p class='medium1'>
        <span>Walnuts</span>
    </p>
    <p class='medium1'>
        <span>Pecans</span>
    </p>
  </div>
</div>
<div class='master'>
  <div class='big1'>
    <p class='medium1'>
        <span>Bananas</span>
    </p>
    <p class='medium1'>
        <span>Apples</span>
    </p>
    <p class='medium1'>
        <span>Oranges</span>
    </p>
  </div>
</div>
<br/>
<br/>
<button id='clickme'>Click me</button>

jQuery的：

$(document).ready(function() {
  $('#clickme').click(function() {
    $(".big1 > p > span:contains('Walnuts')")
        .parent()
        .insertAfter("<p class='medium1'><span>Cashews</span></p>");
   });
});

再次......这不是我想要的：

Answer 1

您需要使用after()，而不是insertAfter()

$(document).ready(function () {
    $('#clickme').click(function () {
        $(".big1 > p > span:contains('Walnuts')")
            .parent()
            .after("<p class='medium1'><span>Cashews</span></p>");
    });
});

演示：Fiddle

after（） - 如果必须在左侧元素之后插入右侧元素
insertAfter（） - 如果必须在RHS之后插入LHS，并且想要返回对插入元素的引用

Answer 2

使用.after()和.append()。

$(document).ready(function() {
$('#clickme').click(function() {
    $(".big1 > p > span:contains('Walnuts')")
       .parent()
        .after("<p class='medium1'><span>Cashews</span></p>");
});
});

Fiddle

jquery搜索文本，然后获取父项。然后插入新数据

2 个答案: