Question

我使用jquery添加了两个div。我在jquery .next（）中使用相应的选择器来定位它们。我总是得到第二个div。

HTML：

<body>
  <p class = 'myp'>this is my p</p>
</body>

jquery的：

    $(function(){
      $('p.myp').after('<div class = "firstDiv">first div added with jquery</div>');
      $('p.myp').after('<div class = "secondDiv">second div added with jquery</div>');
      console.log($('p.myp').next('div.firstDiv').text());

      console.log($('p.myp').next('div.secondDiv').text());
    });

jsbin： http://jsbin.com/lomol/4/edit

Answer 1

next()选择下一个元素，传递的选择器只是一个过滤器，它不会搜索任何比下一个直接兄弟更远的元素

当您使用after()两次时，插入的第一个元素会被按下，因此它不再是下一个直接元素，您最终得到的标记是

<body>
  <p class="myp">this is my p</p>
  <div class="secondDiv">second div added with jquery</div> <!-- this is next -->
  <div class="firstDiv">first div added with jquery</div> <!-- this is not -->
</body>

还有许多其他方法可以使用ID获取元素，使用引用等创建元素。

$(function () {
    var first = $('<div />', {
        'class' : 'firstDiv',
        text    : 'first div added with jquery'
    });
    var second = $('<div />', {
        'class' : 'secondDiv',
        text    : 'second div added with jquery'
    });

    $('p.myp').after(first);
    $('p.myp').after(second);

    console.log(first.text());
    console.log(second.text());
});

FIDDLE

Answer 2

这并不奇怪，因为secondDiv永远是下一个元素。你可能会看到它是如何工作的：

最初您有以下标记：
```
<p class="myp">this is my p</p>
```

然后在firstDiv之后插入p.myp：

$('p.myp').after('<div class="firstDiv"></div>');

您的标记如下：

<p class="myp">this is my p</p>
<div class="firstDiv"></div>

然后在secondDiv之后插入p.myp：

$('p.myp').after('<div class="secondDiv"></div>');

你的标记变为：

<p class="myp">this is my p</p>
<div class="secondDiv"></div>
<div class="firstDiv"></div>

从上面您可能会看到secondDiv现在是<p>之后的下一个元素。

jquery里面的selector .next（）方法没有选择正确的元素

2 个答案: