如何在jquery中查找特定父级下的类名

Posted 2023-03-16

【中文标题】如何在jquery中查找特定父级下的类名

【英文标题】：How to find a classname under a specific parent in jquery

【发布时间】：2019-04-18 01:37:06

【问题描述】：

我这里有问题。请参考下面的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 is here”发出警报，否则“h1 is not here”

【参考方案1】：

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

【参考方案2】：

只需瞄准$('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>

或者，如果你特别想获取.second2下的<h1>标签，可以将.find()用作$('.second2').find('h1')。

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

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>

【讨论】：

嗨@obsidian，谢谢，但我想指定h1属于second2或者h1是否属于second1。

@JustinDuran -- 我刚刚更新了我的答案，希望能更清楚地展示这一点，使用.hasClass() :)