如何在jQuery中的特定父项下查找类名

Question

我在这里有问题。请参考下面的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之间的哪个类具有h1标签。因为如果要在second2下找到“ h1在这里”，我要发出警报，否则“ h1在这里”

Answer 1

只需定位到$('h1')，然后您就可以使用.parent()来获取父元素，并使用.attr('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>

或者，如果您特别想抓住<h1>下的.second2标签，可以将.find()用作$('.second2').find('h1')。 / p>

这可以在以下（略作修改的）代码中看到：

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()检查是否存在类，并且要检查祖父母（.parent().parent()）是否具有类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>

Answer 2

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");
}