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

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