选择顶级兄弟姐妹而不为他们分配班级答案

【问题标题】：Selecting top level siblings without assigning a class to them选择顶级兄弟姐妹而不为他们分配班级
【发布时间】：2012-10-25 05:29:40
【问题描述】：

我正在尝试使用 jquery 选择顶级兄弟姐妹。我不能使用使任务更加困难的类名。

<ul>  
<li>  
    <a href="index.html">1</a>
    <ul>
        <li>  
            <a href="indexsub.html">sub1</a>  
        </li>
        <li>  
            <a href="indexsub2.html">sub2</a>  
        </li>
    </ul>  
</li>  
<li>  
<a href="index2.html">2</a>  
</li>
<li>  
<a href="index3.html">3</a>
</li>
</ul>

以下是 JSfiddle 的链接。

http://jsfiddle.net/KMhzy/28/

我想为除子列表元素（即 sub1 和 sub2）之外的所有标签更改 href="#"。

【问题讨论】：

您的标记不符合 w3c 标准。
你需要考虑孩子而不是兄弟姐妹。哦，是的，您的 HTML 可以正常工作，但是无效并且没有达到您的预期。
我忘记为子列表项添加

标签： jquery jquery-selectors siblings

【解决方案1】：

使用.not 和contains 的组合

$("ul li a").not(":contains('sub1')").attr("href","#");

更新

reference

Demo

jQuery.expr[':'].containsAny = function(element, index, match) {
var words = match[3].split(/\s+/);
var text = $(element).text();
var results = $.map(words, function(word) {
    return text === word;
});
return $.inArray(true, results) !== -1;
};

$("ul li a").not(":containsAny(sub1 sub2)").attr("href","#");

【讨论】：

感谢您的回复。上面给出的代码只是一个示例。我有多个子列表项。

【解决方案2】：

首先，您必须更改 HTML（嵌套菜单中缺少 ul）：

<ul>
    <li>
        <a href="index.html">1</a>
        <ul>
            <li>
                <a href="indexsub.html">sub1</a>
            </li>   
        </ul>
    </li>
    <li>
        <a href="index2.html">2</a>
    </li>
    <li>
        <a href="index3.html">3</a>
    </li>
</ul>

接下来，你可以用这个实现你想要的：

$("ul li a").not("ul li li a").attr("href", "#");

（这里提出的其他解决方案被硬编码为一些 'sub1' 值，如果这是你想要的，这应该可以解决所有子菜单的问题）。

这是jsfiddle

【讨论】：

谢谢，我不想使用硬编码解决方案。此示例按预期工作。

【解决方案3】：

试试这个：

$('ul li a[href!="indexsub.html"]').attr("href","#");

【讨论】：

【解决方案4】：

注意：ul 只能包含列表项，并且在列表项中添加另一个列表项而不定义ul 或ol 标记被视为语法错误。

根据 W3C 标准正确标记：

<ul>  
    <li>  
        <a href="index.html">1</a>
        <ul> 
            <li>  
                <a href="indexsub.html">sub1</a>  
            </li>  
       </ul>  
   </li>
   <li>  
       <a href="index2.html">2</a>  
   </li>
   <li>  
       <a href="index3.html">3</a>
   </li>
 </ul>

Pragnesh Chauhan 建议的代码按预期工作。

$("ul li a").not(":contains('sub1')").attr("href","#");

SEE DEMO

【讨论】：

感谢您的回复。上面给出的代码只是一个示例。我有多个子列表项。即实际的 sub1、sub2、sub3。
这只是语法错误，因为第二个</li> 结束标记与原来的开始标记解除关联，从而成为错误。如果你删除它，那么你会在同一个ul 中得到两个lis，这是正确的 HTML 但不正确的 XHTML。

【解决方案5】：

这就是你想要的：

$("ul li:first-child a").attr("href","#");

和相同的 jsFiddle：http://jsfiddle.net/KMhzy/43/

PS：它也适用于多个孩子... :)

【讨论】：

@Umair Cheema：在这里，:first-child 选择器可以解决问题。它只会选择搜索模式的第一级子级。 :)