CODEWITHSUNDEEP
jqueryclassselector
dzumla011
dzumla011

Reputation: 612

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.

Upvotes: 4

Views: 39851

Answers (7)

CPHPython
CPHPython

Reputation: 13749

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>

Upvotes: 3

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

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

Upvotes: 6

Yogesh
Yogesh

Reputation: 924

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

});

Upvotes: 0

Balint Bako
Balint Bako

Reputation: 2560

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.

Upvotes: 1

Bindiya Patoliya
Bindiya Patoliya

Reputation: 2764

You can also use 

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

instead of

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

Upvotes: 0

Bram Vanroy
Bram Vanroy

Reputation: 28505

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

Upvotes: 14

Rohan Kumar
Rohan Kumar

Reputation: 40639

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

Upvotes: 1

Related Questions