Question

$(document).on('click', '#summary [class^=lv]', function (e) {
     $selected = $(this);
     console.log($selected);
     var x = $(this).toggleClass('clicked');
     $("[class^=lv]").not(x).removeClass("clicked child").addClass("child");
     e.stopPropagation();

     alert($selected.text());
  
 });

.clicked{
  color:red;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="summary">
  <div class="lv1">
    LV1. Title1
    <div class="lv2">LV2. Title2</div>
  </div>
</div>

现在，我使用.text（）方法获取div元素的内容。但是，当我尝试获得第一级div内容时，它会返回第二级内容。

如何在点击每个div项目时只获取每个div内容？

Answer 1

在 vanilla JavaScript 中，您可以遍历 childNodes ，寻找 #text 节点（node.nodeType === 3），然后连接他们的数据

function immediateText(parent) {
    var i, t = '';
    for (i = 0; i < parent.childNodes.length; ++i)
        if (parent.childNodes[i].nodeType === 3)
            t += parent.childNodes[i].data;
    return t;
}

DEMO

Answer 2

您可以通过制作克隆并删除所有div s

来获取它

var lev1=$(".lv1").clone()
lev1.children('div').remove();
alert (lev1.html());

.clicked{
  color:red;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="summary">
  <div class="lv1">
    LV1. Title1
    <div class="lv2">LV2. Title2</div>
  </div>
</div>

Answer 3

替代方法 - 如果您只想查看单击div的文本：

  if($selected.children('div').length) {

        text=$selected.text().replace($selected.children('div').text(),'');
}

    else {
         text=$selected.text();
    }
     alert(text);

Jsfiddle：documentation

当里面有另一个div时，如何获得一级div的文本内容？

3 个答案: