javascript - 单击该元素时获取 li 元素文本

Question

我有这个代码。当我单击任何 li 元素时，第一个警报会显示其值，然后显示其父项，然后再次显示该父项，依此类推。我只想显示被点击的 li 元素的文本。我该怎么做？

$('#container li').on('click', function() {
  alert($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <ul class="xyz">
    <li>Grand Parent 1</li>
    <li>
      <ul class="xyz">
        <li>Parent 1</li>
        <li>Parent 2
          <ul class="xyz">
            <li>Child 1</li>
            <li>Child 2</li>
            <li>Child 3</li>
            <li>Child 4</li>
          </ul>
        </li>
        <li>Parent 3</li>
        <li>Parent 4</li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

您的第一个问题是您需要停止从单击的 li 到父 li 元素的事件传播。您可以在传递的事件处理程序上调用 stopPropagation 来执行此操作。

其次，我假设您只想检索 li 的子文本值，而不是它的后代文本，在这种情况下您需要使用 contents()[0 ] 访问它。试试这个:

$('#container li').on('click', function(e) {  
  e.stopPropagation();
  var text = $(this).contents()[0].nodeValue.trim();
  console.log(text);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <ul class="xyz">
    <li>Grand Parent 1</li>
    <li>
      <ul class="xyz">
        <li>Parent 1</li>
        <li>
          Parent 2
          <ul class="xyz">
            <li>Child 1</li>
            <li>Child 2</li>
            <li>Child 3</li>
            <li>Child 4</li>
          </ul>
        </li>
        <li>Parent 3</li>
        <li>Parent 4</li>
      </ul>
    </li>
  </ul>
</div>