Question

我有这个案子：

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

我只需要获得标签以外的价值＆＃34; $ 204.61＆＃34;使用选择器标记。

累了

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

但结果是

销售税： $ 204.61

＆＃13;

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

＆＃13;

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

＆＃13;

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>

UPDATE 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>

Answer 2

不是使用复杂的html查询，而是更好地调整html以更好地满足您的需求。正如@ freedomn-m所写，将html更改为以下内容：

str

您的脚本将如下所示：

int

Answer 3

为什么要更改html代码。这样可以轻松完成工作。

＆＃13;

$(document).ready(function(){
  var result = $('li:last span').text();
  console.log(result);
})

＆＃13;

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

＆＃13;

Answer 4

这不是你问题的答案，而只是一个我觉得有点相关的实验。

我意识到您希望收集数据，而不是仅仅尝试隐藏部分内容。

但这让我想到，如果你可以实际隐藏它的某些部分使用CSS

同样，这更像是一个实验，但Can I use表示这对于至少89％的用户来说至今仍有效。我测试了Chrome和FF，一切都很顺利。不支持IE / Edge。

＆＃13;

li {
  margin-left: -5.5em;
  -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0)5.5em, /** <---- Use this to determine the cutoff point **/
  rgba(0, 0, 0, 1)0, rgba(0, 0, 0, 1));
}

＆＃13;

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

＆＃13;

我只需要使用选择器

4 个答案: