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

时间:2017-07-20 14:40:00

标签: javascript jquery html css

我有这个代码。当我点击任何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>

1 个答案:

答案 0 :(得分:4)

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

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

&#13;
&#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;
&#13;
&#13;