jQuery - 一个一个地显示 div答案

【问题标题】：jQuery - Display divs one by onejQuery - 一个一个地显示 div
【发布时间】：2017-08-15 01:08:11
【问题描述】：

我正在尝试编写一个简单的脚本，该脚本将能够逐个读取/显示每个 DIV（不会干扰内部的其他 div）。不幸的是，我的想法并没有像我想象的那样奏效。我用.children().remove().each 实现了我的目标，但发现它跳过了第一个 div 并删除了里面的所有其他 div。如果有人可以帮助我或指出我做错了什么，我将不胜感激。

$(function Testing(){
  
    $("div").each(function(){
        var Div = $(this).text();
        alert(Div);
    });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
    <div id="Alpha">
        Alpha
        <div id="Bravo">
            Bravo
            <div id="Charlie">
                Charlie
                <div id="Delta">
                    Delta
                </div>
            </div>
        </div>
    </div>
</body>

【问题讨论】：

标签： javascript jquery html each

【解决方案1】：

看起来你想要嵌套结构。如果是这种情况，您至少可以通过以下几种方式做到这一点：

$(function Testing() {

  $("#container div").each(function() {

    // my variation on this answer: http://stackoverflow.com/a/32170000/1544886
    var Div = $(this).contents().not($(this).children()).text();

    /* or another way: http://stackoverflow.com/a/33592275/1544886
      var Div = $(this)
        .clone()    //clone the element
        .children() //select all the children
        .remove()   //remove all the children
        .end()  //again go back to selected element
        .text(); 
    */

    alert(Div);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div id="Alpha">
    Alpha
    <div id="Bravo">
      Bravo
      <div id="Charlie">
        Charlie
        <div id="Delta">
          Delta
        </div>
      </div>
    </div>
  </div>
</div>

我添加div#container 只是因为我不喜欢使用代码sn-p 创建的divs 生成的额外警报。没有必要在您的代码中执行此操作...您可以忽略它并使用您的选择器 $("div")。

【讨论】：

非常感谢！我意识到我的错误在哪里。现在它可以正常工作了。

【解决方案2】：

要获得所需的输出，您需要更改 HTML 以便每个 div 只包含您希望它输出的文本。

运行此代码 sn-p 时，您会注意到两个空白警报。这是因为 SO（隐藏）在代码 sn-p 中放置了额外的 div。这些额外的警报不会显示在您的本地脚本中。

$(function Testing() {

  $("div").each(function() {
    var div_text = $(this).text();
    alert(div_text);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="Alpha">Alpha</div>
  <div id="Bravo">Bravo</div>
  <div id="Charlie">Charlie</div>
  <div id="Delta">Delta</div>
</body>

另外，使用描述性变量。最好现在就开始这个练习（因为你正在学习），这样你就不会养成坏习惯。我把Div改成div_text作为例子。

【讨论】：

感谢您的建议。但是，您的解决方案更像是隐瞒答案，而不是为它找到解决方案。
@GeorgeStoqnov HTML 的结构很奇怪，既然你提到你正在学习，我认为它也可以接受建议。不要试图躲避任何事情:)