用于 div 中 ul 元素类的 jQuery 过滤器

Question

我有这样的 html。 我正在尝试获取id = 'accordion' div 中每个<ul>元素的类。 有没有一种简单的方法可以使用 jQuery 查询？ 我一直在查看文档，但没有找到可以直接使用的内容。 例如，我想做一些类似的事情：

$("#accordion").filter()

<div id="accordion">
    <h3>Section 1</h3>
    <div>
        <ul class="section1">
            <li><a href="www.google.com"> List item one</a></li>
            <li><a href="www.google.com"> List item two</a></li>
            <li><a href="www.google.com"> List item three</a></li>
        </ul>
    </div>
    <h3>Section 2</h3>
    <div>
        <ul class="section2">
            <li><a href="www.google.com"> List item one</a></li>
            <li><a href="www.google.com"> List item two</a></li>
            <li><a href="www.google.com"> List item three</a></li>
        </ul>
    </div>
    <h3>Section 3</h3>
    <div>
        <ul class="section3">
            <li><a href="www.google.com"> List item one</a></li>
            <li><a href="www.google.com"> List item two</a></li>
            <li><a href="www.google.com"> List item three</a></li>
        </ul>
    </div>
</div>

Answer 1

您可以使用$('#accordion *')定位div内的任何元素。 然后检查当前元素是否具有class属性。

尝试以下方式：

 $('#accordion *').each(function(){ if($(this).attr('class')) console.log($(this).attr('class') + ' is in ' + $(this)[0].nodeName); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="accordion"> <h3>Section 1</h3> <div> <ul class="section1"> <li><a href="www.google.com"> List item one</a></li> <li><a href="www.google.com"> List item two</a></li> <li><a href="www.google.com"> List item three</a></li> </ul> </div> <h3>Section 2</h3> <div> <ul class="section2"> <li><a href="www.google.com"> List item one</a></li> <li><a href="www.google.com"> List item two</a></li> <li><a href="www.google.com"> List item three</a></li> </ul> </div> <h3>Section 3</h3> <div> <ul class="section3"> <li><a href="www.google.com"> List item one</a></li> <li><a href="www.google.com"> List item two</a></li> <li><a href="www.google.com"> List item three</a></li> </ul> </div> </div>

如果要将所有类作为数组使用filter()和map() ，如下所示：

 let allClass = $('#accordion *').filter(function(){ return $(this).attr('class') }).get().map(el => el.className); console.log(allClass);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="accordion"> <h3>Section 1</h3> <div> <ul class="section1"> <li><a href="www.google.com"> List item one</a></li> <li><a href="www.google.com"> List item two</a></li> <li><a href="www.google.com"> List item three</a></li> </ul> </div> <h3>Section 2</h3> <div> <ul class="section2"> <li><a href="www.google.com"> List item one</a></li> <li><a href="www.google.com"> List item two</a></li> <li><a href="www.google.com"> List item three</a></li> </ul> </div> <h3>Section 3</h3> <div> <ul class="section3"> <li><a href="www.google.com"> List item one</a></li> <li><a href="www.google.com"> List item two</a></li> <li><a href="www.google.com"> List item three</a></li> </ul> </div> </div>

Answer 2

您可以使用.find()函数，例如

$("#accordion").find("")

Answer 3

您可以使用$('#accordion').find('ul')来获取所有<ul>元素。 然后您可以访问这些元素的类。

 $('#accordion').find('ul').each(function(){ console.log($(this).attr('class')); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="accordion"> <h3>Section 1</h3> <div> <ul class="section1"> <li><a href="www.google.com"> List item one</a></li> <li><a href="www.google.com"> List item two</a></li> <li><a href="www.google.com"> List item three</a></li> </ul> </div> <h3>Section 2</h3> <div> <ul class="section2"> <li><a href="www.google.com"> List item one</a></li> <li><a href="www.google.com"> List item two</a></li> <li><a href="www.google.com"> List item three</a></li> </ul> </div> <h3>Section 3</h3> <div> <ul class="section3"> <li><a href="www.google.com"> List item one</a></li> <li><a href="www.google.com"> List item two</a></li> <li><a href="www.google.com"> List item three</a></li> </ul> </div> </div>

Answer 4

您可以使用下面的代码来获取每个 ul 元素的类：

$('#accordion ul').each(function(){
      console.log($(this).attr('class'));
});

Answer 5

您只需要使用find()和 jquery 的each()方法，如下所示：-

 $(document).ready(function(){ $('#accordion div ul').each(function(){ alert($(this).attr('class')); }) });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="accordion"> <h3>Section 1</h3> <div> <ul class="section1"> <li><a href="www.google.com"> List item one</a></li> <li><a href="www.google.com"> List item two</a></li> <li><a href="www.google.com"> List item three</a></li> </ul> </div> <h3>Section 2</h3> <div> <ul class="section2"> <li><a href="www.google.com"> List item one</a></li> <li><a href="www.google.com"> List item two</a></li> <li><a href="www.google.com"> List item three</a></li> </ul> </div> <h3>Section 3</h3> <div> <ul class="section3"> <li><a href="www.google.com"> List item one</a></li> <li><a href="www.google.com"> List item two</a></li> <li><a href="www.google.com"> List item three</a></li> </ul> </div> </div>

Answer 6

尝试这个

 var arrayOfClassNames = $("#accordion *").map(function() { if($(this).attr('class')) return this.className; }).get(); console.log(arrayOfClassNames);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="accordion"> <h3>Section 1</h3> <div> <ul class="section1"> <li><a href="www.google.com"> List item one</a></li> <li><a href="www.google.com"> List item two</a></li> <li><a href="www.google.com"> List item three</a></li> </ul> </div> <h3>Section 2</h3> <div> <ul class="section2"> <li><a href="www.google.com"> List item one</a></li> <li><a href="www.google.com"> List item two</a></li> <li><a href="www.google.com"> List item three</a></li> </ul> </div> <h3>Section 3</h3> <div> <ul class="section3"> <li><a href="www.google.com"> List item one</a></li> <li><a href="www.google.com"> List item two</a></li> <li><a href="www.google.com"> List item three</a></li> </ul> </div> </div>