Question

当我运行此代码时，只选择了第一个div，只有第一个第二个p标签（＆＃34;包含＆＃34; Greetings＆＃34;）为空，但另一个第二个p标签留在另一个两个div不受影响。我希望所有三个div都受到影响，以便所有第二个p标签（＆＃34;包含＆＃34; Greetings＆＃34;）都是空的。

＆＃13;

var e = $('div').children();
e.eq(1).empty();

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
    <title>jQuery Effects</title>
    <style media="screen">
      div{
        width: 200px;
        height: 200px;
        background: teal;
        float: left;
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <button>Click Me</button>
    <div>
      <p>Hello</p>
      <p>Greetings</p>
      <p>Bye</p>
    </div>
    <div>
      <p>Hello</p>
      <p>Greetings</p>
      <p>Bye</p>
    </div>
    <div>
      <p>Hello</p>
      <p>Greetings</p>
      <p>Bye</p>
    </div>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>

＆＃13;

Answer 1

问题不在于下面的代码

var e = $('div').children();

它正在选择所有三个div和那里的孩子，所以当你做console.log（e）时，你将得到所有9个p标签（每个div 3个）。问题在于

e.eq(1)

当你这样做时，你只选择所有九个中的第二个p标签。而不是尝试使用

p:nth-of-type(2)

这样的孩子选择器。这只会从所有div中选择第二个p标签。

var e = $('div').children('p:nth-of-type(2)');
e.empty();

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
    <title>jQuery Effects</title>
    <style media="screen">
      div{
        width: 200px;
        height: 200px;
        background: teal;
        float: left;
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <button>Click Me</button>
    <div>
      <p>Hello</p>
      <p>Greetings</p>
      <p>Bye</p>
    </div>
    <div>
      <p>Hello</p>
      <p>Greetings</p>
      <p>Bye</p>
    </div>
    <div>
      <p>Hello</p>
      <p>Greetings</p>
      <p>Bye</p>
    </div>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>

希望这有帮助！

Answer 2

@Xufox的评论是一个非常好的简短解决方案（使用$('div > p:nth-child(2)').empty();链接到底部的nth），但如果你想要更详细的一个：

选择每个p的第二个div并清空它，

您可以遍历div并使用nth选择第二个p

试试这个：

$('div').each(function(ndx,elem){
    $(elem).children('p:nth(1)').empty();
});

小提琴：https://jsfiddle.net/5xt0makw/9/

：nth-child（n）选择器匹配第n个元素孩子，无论其类型如何，都是其父母。

第n个选择器：https://www.w3schools.com/cssref/sel_nth-child.asp

.each函数可用于无缝迭代两个对象和阵列。

jQuery .each：http://api.jquery.com/jquery.each/

我希望这会有所帮助。

Answer 3

做一个＆＃34;每个＆＃34;是不是更好？并获得所有的价值，以更好地工作？ E.g：

$("div").each((a, b) => {
  console.log(a, b);
});

jQuery没有选择所有div标签

3 个答案: