如何在 jquery 中查找特定父类下的类名
How to find a classname under a specific parent in jquery
我这里有问题。请参考下面的html代码:
<div class="main">
<div class="second1">
<div class="third1">
<p></p>
</div>
</div>
<div class="second2">
<div class="third1">
<h1></h1>
</div>
</div>
</div>
我想知道 second1 和 second2 之间的 class 中哪个有 h1 标签。因为如果在 second2 else "h1 is not here"
下找到它,我想用 "h1 is here" 提醒
只需瞄准 $('h1')
,然后您就可以使用 .parent()
to grab the parent element, and .attr('class')
来获取 class 个名称。
这可以在下面看到:
console.log($('h1').parent().attr('class'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="second1">
<div class="third1">
<p></p>
</div>
</div>
<div class="second2">
<div class="third1">
<h1></h1>
</div>
</div>
</div>
或者,如果你特别想抓取.second2
下的<h1>
标签,可以利用.find()
作为$('.second2').find('h1')
.
这可以在下面的(slightly-modified)代码中看到:
console.log($('.second2').find('h1').parent().attr('class'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="second1">
<div class="third1-in-second1">
<h1></h1>
</div>
</div>
<div class="second2">
<div class="third1-in-second2">
<h1></h1>
</div>
</div>
</div>
您可以使用 .hasClass()
检查 class 是否存在,并且您需要检查祖父母 (.parent().parent()
) 是否具有 class second2
.
这可以在下面看到:
if ($('h1').parent().parent().hasClass('second2')) {
alert('h1 is here');
}
else {
alert('h1 is NOT here');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="second1">
<div class="third1">
<p></p>
</div>
</div>
<div class="second2">
<div class="third1">
<h1></h1>
</div>
</div>
</div>
let secondClass = $('.main').find('h1').parent().parent().attr('class');
console.log("h1 tag is on" + secondClass);
if(secondClass === "second1"){
//...
alert("h1 is in second1");
}else{
//...
alert("h1 is in second2");
}
我这里有问题。请参考下面的html代码:
<div class="main">
<div class="second1">
<div class="third1">
<p></p>
</div>
</div>
<div class="second2">
<div class="third1">
<h1></h1>
</div>
</div>
</div>
我想知道 second1 和 second2 之间的 class 中哪个有 h1 标签。因为如果在 second2 else "h1 is not here"
下找到它,我想用 "h1 is here" 提醒只需瞄准 $('h1')
,然后您就可以使用 .parent()
to grab the parent element, and .attr('class')
来获取 class 个名称。
这可以在下面看到:
console.log($('h1').parent().attr('class'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="second1">
<div class="third1">
<p></p>
</div>
</div>
<div class="second2">
<div class="third1">
<h1></h1>
</div>
</div>
</div>
或者,如果你特别想抓取.second2
下的<h1>
标签,可以利用.find()
作为$('.second2').find('h1')
.
这可以在下面的(slightly-modified)代码中看到:
console.log($('.second2').find('h1').parent().attr('class'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="second1">
<div class="third1-in-second1">
<h1></h1>
</div>
</div>
<div class="second2">
<div class="third1-in-second2">
<h1></h1>
</div>
</div>
</div>
您可以使用 .hasClass()
检查 class 是否存在,并且您需要检查祖父母 (.parent().parent()
) 是否具有 class second2
.
这可以在下面看到:
if ($('h1').parent().parent().hasClass('second2')) {
alert('h1 is here');
}
else {
alert('h1 is NOT here');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="second1">
<div class="third1">
<p></p>
</div>
</div>
<div class="second2">
<div class="third1">
<h1></h1>
</div>
</div>
</div>
let secondClass = $('.main').find('h1').parent().parent().attr('class');
console.log("h1 tag is on" + secondClass);
if(secondClass === "second1"){
//...
alert("h1 is in second1");
}else{
//...
alert("h1 is in second2");
}