Question

如何在jquery中onclick中的嵌套文件中获取文本我的代码如下，

当我点击li时，我需要获取当前的li文本，

$('.selectRow li').on('click', function() {
  var textSelected = $(this).text();
  console.log(textSelected)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="selectRow">
  <li>test-1</li>
  <li>test-2</li>
  <li>test-3
    <ul>
      <li>test-3.1</li>
      <li>test-3.2</li>
      <li>test-3.3</li>
      <li>test-3.4</li>
    </ul>
    </li>
    <li>test-4</li>
    <li>test-5</li>
    <li>test-6
      <ul>
        <li>test-6.1</li>
        <li>test-6.2</li>
        <li>test-6.3</li>
        <li>test-6.4</li>
      </ul>
      </li>
</ul>

我获取当前的li文本onclick，但是如果我点击子菜单li我也得到所有父li文本和子菜单文本。任何人都可以告诉我解决方案。

Answer 1

既然你没有找到我找到的解决方案，我已经为你做了这个例子：

$('.selectRow li').on('click', function(e) {
  if (e.target == e.currentTarget) {

    var textSelected = $(this)
      .clone() //clone the element
      .children() //select all the children
      .remove() //remove all the children
      .end() //again go back to selected element
      .text()
      .trim();
    console.log(textSelected);
  }
})

这只会返回点击的li

的文字

<强>演示

＆＃13;

$('.selectRow li').on('click', function(e) {
  if (e.target == e.currentTarget) {

    var textSelected = $(this)
      .clone() //clone the element
      .children() //select all the children
      .remove() //remove all the children
      .end() //again go back to selected element
      .text()
      .trim();
    console.log(textSelected);
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="selectRow">
  <li>test-1</li>
  <li>test-2</li>
  <li>test-3
    <ul>
      <li>test-3.1</li>
      <li>test-3.2</li>
      <li>test-3.3</li>
      <li>test-3.4</li>
    </ul>
  </li>
  <li>test-4</li>
  <li>test-5</li>
  <li>test-6
    <ul>
      <li>test-6.1</li>
      <li>test-6.2</li>
      <li>test-6.3</li>
      <li>test-6.4</li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

这里的解决方案您可以使用事件对象的stopPropagation方法：

$(document).on('click', '.selectRow li', function(e){
   e.stopPropagation();
   console.log('li element is clicked');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="selectRow">
  <li>test-1</li>
  <li>test-2</li>
  <li>test-3
    <ul>
      <li>test-3.1</li>
      <li>test-3.2</li>
      <li>test-3.3</li>
      <li>test-3.4</li>
    </ul>
  </li>
    <li>test-4</li>
    <li>test-5</li>
    <li>test-6
      <ul>
        <li>test-6.1</li>
        <li>test-6.2</li>
        <li>test-6.3</li>
        <li>test-6.4</li>
      </ul>
      </li>
</ul>

你也会在这里找到答案 Why ul gets triggered when I click on li?

如何在jquery onclick中获取嵌套的ul li文本

2 个答案: