jquery - 我只需要使用选择器获取标签外部的值

Question

我有这样的案例:

<li>
    <label>Sales Tax:</label>
    $204.61
</li>

我只需要使用选择器获取标签“$204.61”标签之外的值。我厌倦了

$( "li:last").text()

但结果是

Sales Tax: $204.61

$("li:last").text();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <label>Sales Tax:</label> $204.61
</li>

Answer 1

过滤掉文本节点，然后获取其文本内容。

var text = $('li:last')
  // get all child nodes including textnodes
  .contents()
  // filterout text nodes
  .filter(function() {
    return this.nodeType == 3;
  })
  // get text content and trim out leading and trailing space
  .text().trim();

// or in case structure is same then use
var text1 = $('li:last')
  .contents()
  // get the last node which is the text
  .last()
  .text().trim();

console.log(text);
console.log(text1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <label>Sales Tax:</label> $204.61
  </li>
</ul>

<小时/>

更新1:使用纯JavaScript(假设仅获取最后一个文本节点)

// if there is only single ul then you can use
// var last = document.querySelector('li:last-child');

// get all li tags
var lis = document.getElementsByTagName('li');
// get the last li
var last = lis[lis.length - 1];
// get the last child node and then its text conetent
var text = last.childNodes[last.childNodes.length - 1].textContent.trim();

console.log(text);

<ul>
  <li>
    <label>Sales Tax:</label> $204.61
  </li>
</ul>

<小时/> 更新2:无论如何，最好用 span包裹元素，以便以简单的方式获取文本。

var text = $('li:last span').text();

console.log(text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <label>Sales Tax:</label> <span>$204.61</span>
  </li>
</ul>