使用jQuery查找特定文本，然后将类添加到下面的UL

Using jQuery to find certain text, then add class onto the following UL

本文关键字：添加 UL 然后 查找 jQuery 文本 使用      更新时间：2023-09-26

因此，我试图根据导航中使用的文本将类添加到UL上。

例如

。

   <li>
        <a href="#">Text</a>
        <ul>
        </ul>
   </li>

我想在ul中添加一个类，这取决于a标签内的文本，要找到文本，我只需使用a:contains方法

$('#nav > li > a:contains("text")')

之后，我在如何将类添加到后面的ul上画空白，我认为。next可能会工作，但事实证明它没有。

任何帮助都将非常感激!

应该可以。请记住contains是区分大小写的:

$('#nav > li > a:contains("Text")').next().addClass('testClass');

所以，就像:

$('#nav > li > a:contains("Text") + ul')

?如果<ul>可以在此之后的任何位置，则使用:

$('#nav > li > a:contains("Text") ~ ul')

。编辑:另外，Text的大小写是错误的。:contains是区分大小写的(正如其他人现在指出的那样)。

如果我理解正确，你的下一个不会去任何地方，因为你没有选择一个jquery对象。比如

$('#nav > li > a').each(function(){
if(yourCondition){
$(this).next('ul').addClass('yourClass');
}
});

您没有开始选择a元素。

大小写应该匹配:

$('#nav > li > a:contains("Text")')

S:匹配"文本"与"Text"没有得到任何匹配

Make it .

$('#nav > li > a:contains("Text")').next('ul').addClass('my-new-class');

. .:)

如上所述，文本的大小写应该是相同的，以便在选择上得到一个肯定的结果。

试试这个:

<!DOCTYPE html>
<html>
    <head>
        <title>example</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
        <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/start/jquery-ui.css" rel="Stylesheet" type="text/css" />
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" type="text/javascript"></script>
        <style type="text/css">
            ul.square {list-style-type:square; font-size:x-large;}
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#nav li a:contains("Text")').siblings('ul').addClass("square");
            });
        </script>
    </head>
    <body>
        <ul id="nav">
            <li>some item</li>
            <li>another item <a href="#">uninteresting link</a>
                <ul>
                    <li>sublist item</li>
                </ul>
            </li>
            <li><a href="#">Text</a>
                <ul>
                    <li>Special List</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

相关文章：