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]来访问它。试试这个：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: