如何使用嵌套按钮获取<li>的文本值？

Question

我正在尝试获取当前列表项的文本值。

我尝试使用$(this).text()和$(this).parent().text()，它们都返回undefined或null。我认为解决方案相对简单，但我无法解决这个问题。

Answer 1

我知道这与Zakaria Acharki的答案类似，但这个更短。

＆＃13;

＆＃13;

$(function() {
  $('li').click(function() {
    console.log($(this).text());
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li>Coffee <button>something</button></li>
  <li>Tea <button>something</button></li>
  <li>Milk <button>something</button></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

请注意，使用此功能，也会获得按钮内的文字。为避免这种情况，请改用：

＆＃13;

＆＃13;

$(function() {
  $('li').click(function() {
    console.log($(this).clone().children().remove().end().text());
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li>Coffee <button>something</button></li>
  <li>Tea <button>something</button></li>
  <li>Milk <button>something</button></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

在这个惊人的答案中找到：Using .text() to retrieve only text not nested in child tags

编辑：或者，您可以将文本换成a并从中获取文本：

＆＃13;

＆＃13;

$(function() {
  $('li').click(function() {
    console.log($(this).children('span').text());
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li><span>Coffee</span><button>something</button></li>
  <li><span>Tea</span><button>something</button></li>
  <li><span>Milk</span><button>something</button></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在onclick属性中，使用this作为参数调用函数。然后在函数中，您将需要获取整个文本，并删除按钮文本。

此方法不依赖于ID，可用于li标记内的任何按钮。

示例HTML

<li id="ED_H">
  john.live.com
  <button onclick="editUnit(this)" type="button">Edit</button>
</li>

的JavaScript

var editUnit = function (button) {
 var buttonText = button.innerText;
 var fullText = button.parentElement.innerText;
 var wanted = fullText.replace(buttonText, '');
 console.log(wanted);
};

Answer 3

如果您使用点击事件$(this).text()应该有效。

$(function(){
    $('body').on('click', 'li', function(){
        console.log( $(this).text() );
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Answer 4

您可以在要获取文本的childNodes[0]元素上使用li，该元素获取第一个childNode（示例中的文本节点），然后获取该节点的值nodeValue并使用trim()删除任何空格。

＆＃13;

＆＃13;

var elEd_h = document.getElementById("ED_H");
console.log(elEd_h.childNodes[0].nodeValue.trim());

＆＃13;

<li id="ED_H">
  john.live.com
  <button>
  Edit
  </button>
</li>

＆＃13;

＆＃13;

＆＃13;