div中ul元素类的jQuery过滤器

Question

我有这样的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>

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

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

<ul>

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

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>