Question

在下面的html片段中，我试图创建一个JQuery Expression来选择所有带有类zz1_TopNavigationMenu_1的标签Napa1-topnav zz1_TopNavigationMenu_ *“

我对构造包含类名空格的select语法感到困惑。我还想在末尾用一张外卡，最后用'*'字符描述。

<table class="Napa1-topnav zz1_TopNavigationMenu_4" border="0" cellSpacing="0" cellPadding="0">
<tbody>
<tr>
<td style="white-space: nowrap;">
<a class="zz1_TopNavigationMenu_1 Napa1-topnav zz1_TopNavigationMenu_3" style="border-bottom-style: none; border-right-style: none; border-top-style: none; font-size: 1em; border-left-style: none;" href="/sites/Brand1/SubSite

Answer 1

空格字符在类名中无效;这是一个分隔符。标签可能包含多个类名。例如，<a id="foobar" class="foo bar">有两个类：foo和bar，因此$('#foobar').getClasses()将有两个类名。

因此，如果您想选择具有单个类的元素：

$('.foo')

如果要选择具有多个类的元素，请执行以下操作：

$('.foo.bar')

Answer 2

.zz1_TopNavigationMenu_1.Napa1-topnav.zz1_TopNavigationMenu_whatever

将为您提供包含所有3个类的元素。通配符不起作用 - 使用CSS选择器没有设施。我会添加一类类似于zz1_TopNavigationMenu的东西，然后任何同样是zz1_TopNavigationMenu_whatever的东西都会得到这个分组类。或者，如果可能，您可以使用ID或元素来获取所有内容。例如，如果菜单ID期望它们都是li元素，那么您可以使用：.zz1_TopNavigationMenu_1.Napa1-topnav li或类似的东西。

查看docs on css selectors以便与jQuery一起使用。

Answer 3

如果这些只是3个类，并且您确定它们将按此顺序显示，则可以使用attribute-starts-with选择器。

试试这个：

$('a[class^=zz1_TopNavigationMenu_1 Napa1-topnav zz1_TopNavigationMenu_]')

这将选择<a>属性以class开头的zz1_TopNavigationMenu_1 Napa1-topnav zz1_TopNavigationMenu_元素。

http://api.jquery.com/attribute-starts-with-selector/

或者，您可以获取前两个类的元素，并使用过滤器确保它以第三个类结束。它的编写方式，假设你的“通配符”字符是数字或数字。

$('a.zz1_TopNavigationMenu_1.Napa1-topnav').filter(function() {
    return /zz1_TopNavigationMenu_\d+$/.test($(this).attr('class'));
});

http://api.jquery.com/filter/

如何选择带空格的类名和使用通配符

3 个答案: