【问题标题】：jQuery filter for ul element class within a div用于 div 中 ul 元素类的 jQuery 过滤器
【发布时间】：2018-11-05 15:08:36
【问题描述】：
我有这样的 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>
【问题讨论】：
标签：
javascript
jquery
html
filter
【解决方案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>
【解决方案2】：
试试这个
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>
【解决方案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>
【解决方案4】：
你可以使用.find()这样的函数
$("#accordion").find("")
【解决方案5】：
您可以使用下面的代码来获取每个 ul 元素的类：
$('#accordion ul').each(function(){
console.log($(this).attr('class'));
});
【解决方案6】：
你只需要使用 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>