如何获得最顶级的div父类答案

【问题标题】：How to get top most div parent class如何获得最顶级的div父类
【发布时间】：2013-07-15 11:53:59
【问题描述】：

我需要获取主要的culpritClass div 类，该类在键入内容并按下回车后保存所有内容并将其作为字符串放入变量中。

我似乎无法上课。

HTML：

<div class="culpritClass">
<div class="inner" style="display: block;">
<div class="inner_chat"></div>
<form>
<textarea class="chat_text"></textarea> 
</form>     
</div><a class="culpritClass" href="#">culprit</a>
</div>

我尝试了以下 JS，但得到了undefined。

$('.chat_text').keypress(function(e) {
    if (e.keyCode == '13') {

        var ru = $(this).prev().parent().attr('class');

        alert(ru);
    }
});

var ru 是最重要的一行。

【问题讨论】：

如果您知道.culpritClass 是您想要查找的内容，您可以使用.closest(".culpritClass")。可以吗？
阅读这篇文章stackoverflow.com/questions/7089229/…你会更好理解

标签： jquery class selector

【解决方案1】：

var ru = $(this).parent().parent().parent().attr('class');

应该可以解决问题。尽管这看起来不是最简洁的解决方案，但它是 imo 中最直接的解决方案。除非有一个函数可以将参数传递给一个向上传递数字的函数，例如ancestor(3) 将在 DOM 中向上移动三层并返回该元素。

但如果您只是想找到类本身，请尝试最接近的。

var ru = $(this).closest('.culpritClass');

【讨论】：

我事先不知道类名，我认为这是不言而喻的。这对我的问题来说既简单又完美，谢谢。

【解决方案2】：

试试这个：使用.closest()

$('.chat_text').keypress(function(e) {
    if (e.keyCode == '13') {
       var ru = $(this).closest('.culpritClass').attr('class');
       alert(ru);
    }
});

你可以这样做：

var ru = $(this).parents().find('div').eq(0).attr('class');

或者像这样：

var ru = $(this).parents().find('div:first').attr('class');

虽然有很多方法可以做到这一点，但你可以选择你喜欢的方式:)

Demo

【讨论】：

您是通过.culpritClass 选择的，但您再次找到attr class，它不会给您相同的culpritClass class？
OP需要得到main .cuppritClass所以使用.closest('.culpritClass')比较简单

【解决方案3】：

由于您正在重用.culpritClass，为了精确和避免多次parent() 调用，请使用parents() 方法并将该元素的类作为其选择器：

$('.chat_text').keypress(function(e) {
  if (e.keyCode == '13') {
    alert($(this).parents('.culpritClass').attr('class'));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Place the cursor below and press ENTER</h3>
<div class="culpritClass">
  <div class="inner" style="display: block;">
    <div class="inner_chat"></div>
    <form>
      <textarea class="chat_text"></textarea>
    </form>
  </div><a class="culpritClass" href="#">culprit</a>
</div>

【讨论】：

【解决方案4】：

试试这个，

$(this).closest('selector').find('div:first').attr('class');

如果你想要parents .culpritClass 第一个元素，那么试试这个，

 $(this).closest('.culpritClass').find('div:first').attr('class');

【讨论】：

【解决方案5】：

我会选择$(this).parents('.culpritClass')，或者如果你不“了解”这个班级，但你知道它有 3 个父母，那么$(this).parent().parent().parent()

你的 JS 中的问题是 textarea 没有 prev()，你也应该更改它 parent() 并且它会起作用。

【讨论】：

【解决方案6】：

你也可以使用

var ru = $(this).parent('form').parent('div').parent('div').attr('class');

而不是

var ru = $(this).prev().parent().attr('class');

【讨论】：

【解决方案7】：

$(document).ready( function() {
    $('.chat_text').keypress(function(e) {
        if (e.keyCode == '13') {                
            var ru = $(this).closest("div").parent();               
            alert($(ru).html());
        }
    });

});

【讨论】：

请注意，在问题中，用户希望第三个 div 向上而不是最接近的。