时间戳

首页 > 解决方案 > 用于 div 中 ul 元素类的 jQuery 过滤器

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

问题描述

我有这样的html。我正在尝试获取<ul>div 中每个元素的类id = 'accordion'。有没有一种简单的方法来使用 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>

标签： javascriptjqueryhtmlfilter

解决方案

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

试试下面的方法：

$('#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>

推荐阅读