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

时间:2017-06-12 14:59:25

标签: javascript jquery html

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

enter image description here

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

4 个答案:

答案 0 :(得分: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;

答案 1 :(得分:1)

在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);
};

答案 2 :(得分:0)

如果您使用点击事件$(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>

答案 3 :(得分:0)

您可以在要获取文本的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;