如何在jQuery中使用类选择器获得jQuery中元素的所有类?

Question

我想找到每个div的所有类，但它不工作。它只使用id选择器而不是类选择器工作得很好。我尝试了很多方法，但都没有成功。所以拜托，每个人都可以解决这个问题。知道我该怎么做吗?这只是演示代码

get_classes();
function get_classes() {
$('.div1 .section').each(function() {
var classList = $(this).attr("class");
var classArr = classList.split(" ");
if (classArr == 'like') {
console.log(classArr)
}
});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<div class="section outer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, veniam?</p>
</div>
</div>
<div class="div1">
<div class="section outer like">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, veniam?</p>
</div>
</div>

Answer 1

我看到了两个问题。

第一个是top选择器。使用你提供的html，你必须先遍历父div，然后在里面找到相应的div。例如:

function get_classes() {
$('.div1').each(function() {
var $section = $(this).find('.section');

$section.each(function() {

第二个问题是，你试图检查数组是否等于字符串(string .split()返回数组按doc)。

请查找下面的工作示例:

function get_classes() {
$('.div1').each(function() {
var $section = $(this).find('.section');
$section.each(function() {
var classList = $(this).attr("class");
var classArr = classList.split(" ");
if (classArr.indexOf('like') !== -1) {
console.log(classArr)
}
});
});
}
get_classes();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<div class="section outer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, veniam?</p>
</div>
</div>
<div class="div1">
<div class="section outer like">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, veniam?</p>
</div>
</div>

Answer 2

从你的问题来看，你的意图有点不清楚，所以这里有一些例子(为了清楚起见有些冗长)

function getAllUniqueClasses() {
let foundClasses = [];
$('.div1')
.find('.section')
.each(function() {
let myClass = this.classList;
foundClasses = [...new Set([...foundClasses, ...myClass])];
});
return foundClasses;
}
function getAllClasses() {
let allClasses = [];
$('.div1')
.find('.section')
.each(function() {
let myClass = this.classList;
allClasses = [...allClasses, ...myClass];
});
return allClasses;
}
function hasClass(findMe) {
let hasOne =
$('.div1')
.find('.section')
.filter(function() {
return $(this).hasClass(findMe);
});
return !!hasOne.length;
}
console.log("Unique:", getAllUniqueClasses());
console.log("All:", getAllClasses());
let me = 'like';
console.log("found:", hasClass(me));
//Get all elements with a class:
let $have = $('.div1')
.find('.section')
.filter('.like');
//how many we found
console.log($have.length);
//show all in each we found:
$have.each(function() {
console.log('Here:', [...this.classList])
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<div class="section outer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, veniam?</p>
</div>
</div>
<div class="div1">
<div class="section outer like">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, veniam?</p>
</div>
</div>