如何使用CSS选择器不排除范围文本

Question

我在确定如何正确使用：not selector时遇到一些问题。 我有一个包含菜单项的菜单，其中一个菜单项有一个＆＃34; is-selected＆＃34;类，向用户显示他正在访问的当前页面。

我想检索此项目的文字，没有徽章。

Div结构

<div class="a-TreeView-content is-selected is-current--top">
    <a class="a-TreeView-label">
        Orderinvoer
        <span class="cb-Menu-badge">25</span>
    </a>
</div>

以下代码：

var activeMenuItem = $('div.a-TreeView-content.is-selected > a').text();

返回的内容如下：＆＃34; Orderinvoer25＆＃34;

我已尝试以下方法仅检索文字＆＃39; Orderinvoer＆＃39;但我真的不知道我做错了什么：

$('div.a-TreeView-content.is-selected > a span:not(".cb-Menu-badge")').text()
$('div.a-TreeView-content.is-selected > a :not(span)').text()
$('div.a-TreeView-content.is-selected > a:not(".cb-Menu-badge")').text()
$('div.a-TreeView-content.is-selected :not(".cb-Menu-badge")').text()

Answer 1

您可以使用.cb-Menu-badge删除trim()文本和var activeMenuItem = $('div.a-TreeView-content.is-selected > a').text().replace($('.cb-Menu-badge').text(), '').trim(); console.log(activeMenuItem);以删除额外空间。

Stack Snippet

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a-TreeView-content is-selected is-current--top">
  <a class="a-TreeView-label">
        Orderinvoer
        <span class="cb-Menu-badge">25</span>
    </a>
</div>

＆＃13;

GetUserAsync

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个

$('div.a-TreeView-content.is-selected > a')
   .clone()
   .children()
   .remove()
   .end()
   .text();

FIDDLE HERE

.clone()克隆所选元素。

.children()从克隆元素

中选择子项

.remove()删除以前选择的子项

.end()再次选择所选元素

.text()从没有子元素的元素中获取文本

Answer 3

选择.is-selected a中的第一个文字节点。

$(".is-selected a").contents().get(0).nodeValue

var selected = $(".is-selected a").contents().get(0).nodeValue;
console.log(selected);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a-TreeView-content is-selected is-current--top">
  <a class="a-TreeView-label">
        Orderinvoer
        <span class="cb-Menu-badge">25</span>
    </a>
</div>

Answer 4

通过使用：not（）选择器，您尝试选择不是span类型或没有cb-Menu-badge类的锚标记。因此，它始终选择锚标记并为您提供其内部的文本。您可以通过单独选择其第一个内容，将span留在锚标记内，如下所示。详细了解contents()

$($('div.a-TreeView-content.is-selected > a').contents()[0]).text();

如果您的文字内容如'text1<span>text2'

，上面的链接还有更多示例可以帮助您