[英]jQuery filter for ul element class within a div
I have my html like this.我有这样的 html。 I am trying to get the class for each
<ul>
element inside the div with id = 'accordion'
.我正在尝试获取
id = 'accordion'
div 中每个<ul>
元素的类。 Is there a simple way to query this using jQuery?有没有一种简单的方法可以使用 jQuery 查询? I have been looking at the documentation but didn't find something that I could use straight up.
我一直在查看文档,但没有找到可以直接使用的内容。 For instance, I want to do something along the lines of:
例如,我想做一些类似的事情:
$("#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>
You can target any element inside the div with $('#accordion *')
.您可以使用
$('#accordion *')
定位div内的任何元素。 Then check whether the current element has the class attribute or not.然后检查当前元素是否具有class属性。
Try the following way:尝试以下方式:
$('#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>
If you want to get all the classes as an array use filter()
and map()
like the following way:如果要将所有类作为数组使用
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>
您可以使用.find()
函数,例如
$("#accordion").find("")
You can use $('#accordion').find('ul')
to get all the <ul>
elements.您可以使用
$('#accordion').find('ul')
来获取所有<ul>
元素。 Then you can access the class of those elements.然后您可以访问这些元素的类。
$('#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>
You can use the code below to get the class of each ul element :
您可以使用下面的代码来获取每个 ul 元素的类:
$('#accordion ul').each(function(){
console.log($(this).attr('class'));
});
You need to use just find()
with each()
method of jquery like below:-您只需要使用
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>
Try this尝试这个
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.