How to get top most div parent class

问题

I need to get the main culpritClass div class that holds everything after something is typed and enter is pressed and put it into a variable as a string.

I can't seem to get the class.

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>

I tried the following JS but I get undefined.

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

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

        alert(ru);
    }
});

The var ru is the line that matters.

回答1:

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

should do the trick. Even though this doesn't look like it is the neatest solution, it is the most straightforward one imo. Unless there's a function to pass an argument to a function which travels a number up, e.g. ancestor(3) which would travel three levels up in the DOM and return that element.

But if you are just trying to find the class itself, try closest.

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

回答2:

Try this: use .closest()

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

You can either do like this:

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

or like this:

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

Though there are so many ways to do this, you can select the way you like :)

Demo

回答3:

Since you are reusing the .culpritClass, for the sake of precision and to avoid multiple parent() calls, use the parents() method with the class of that element as its selector:

$('.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:

Try this,

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

If you want the parents .culpritClass first element then try this,

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

回答5:

You can also use

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

instead of

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

回答6:

I would go with $(this).parents('.culpritClass') or if you don't "know" the class, but you know that it has 3 parents exactly, then $(this).parent().parent().parent()

The problem in your JS is that the textarea has no prev(), you should change that too parent() and it will work.

回答7:

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

});

来源：https://stackoverflow.com/questions/17653652/how-to-get-top-most-div-parent-class

标签

jquery

class

selector