How to get top most div parent class

Question

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.

Answer 1

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

Answer 2

You can also use

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

instead of

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

Answer 3

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

Answer 4

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.

Answer 5

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>

Answer 6

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

});