Фильтр jQuery для класса элементов ul внутри div - PullRequest
Новая
       3

Фильтр jQuery для класса элементов ul внутри div

0 голосов
/ 05 ноября 2018

У меня есть мой 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>

Ответы [ 6 ]

0 голосов
/ 05 ноября 2018

Попробуйте это 

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>
0 голосов
/ 05 ноября 2018

Вам нужно использовать просто find() с each() методом jquery, как показано ниже: - 

   $(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>
0 голосов
/ 05 ноября 2018

Вы можете использовать код ниже, чтобы получить класс каждого элемента ul: 

$('#accordion ul').each(function(){
      console.log($(this).attr('class'));
});
0 голосов
/ 05 ноября 2018

Вы можете выбрать любой элемент внутри div с помощью $('#accordion *'). Затем проверьте, имеет ли текущий элемент атрибут 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>
0 голосов
/ 05 ноября 2018

Вы можете использовать $('#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>
0 голосов
/ 05 ноября 2018

Вы можете использовать .find() функцию как 

$("#accordion").find("")
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...