JQuery Find closest parent with class

Question

In the following structure

<div class="thisNot">
    <table style="width:100%" class="thisOneUknow">
      <tr>
        <th id="imhere">Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
    </table>
</div>

If I'm on the $('#imhere'), How I can find the closest parent with a class and extract that value? In this case get thisOne (always thinking that i'm standing imhere element)

EDIT: the class thisOneOknown is generated automatically, so this changed on every Page Load, so the selector has been capable to find the first parent with class and store/return it . Somethinng like var closestParentClass = $('#imhere').closest(":hasParent()");

Seems like this would be simple to google and find unless theres something I am missing? Have you [read through this SO question here](http://stackoverflow.com/questions/5333426/how-to-find-a-parent-with-a-known-class-in-jquery)? — crazymatt, Mar 08 '17 at 00:47
$("#imhere").parents("[class]"). Adding link to documentation https://api.jquery.com/has-attribute-selector/ — Jules, Mar 08 '17 at 00:56
Yes,I miss a very important detail: The class thisOne is unknown for me, so the selector .thisOne is not my option. Sorry about that i gonna edit the question — Kemen Paulos Plaza, Mar 08 '17 at 09:14

Ian Stanley · Answer 1 · 2017-03-09T00:47:51.237

4

$('#imhere').closest('.thisOne');

Update after edited question:

I'm afraid I don't understand what you're asking now, however I'll take a guess. Something like the following should allow you to test each parent up to the DOM root:

var element = $($('.lobster')[6]);
while((element = element.parent()).length){
    if(element.is('table')){
        break;
    }
}

// element variable contains the matched DOM element

edited Mar 09 '17 at 00:47

answered Mar 08 '17 at 00:47

Ian Stanley

195
8

Sorry i missed an important detail. ThisOne is generated automatically so i cant use .thisone as Selector. I've edited the question to explain a little more – Kemen Paulos Plaza Mar 08 '17 at 09:20

score 1 · Answer 2 · answered Mar 08 '17 at 01:04

You can use filter method, try this example I put together for you. I hope that helps you.

$(function() {
  var tt= finder('.thisOne','#imhere');
    $('.result').append('<div>data found:'+tt.length+'</div>');
  
  // some unknow class
  var ss= finder('.thisOne','#imNothere');
  $('.result').append('<div>data found:'+ss.length+'</div>');
  
});

function finder(searchMe, checkMe){
  return $(searchMe).filter(function(index) {
    return $(this).find(checkMe).length > 0;
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thisNot">
  <table style="width:100%" class="thisOne">
    <tr>
      <th id="imhere">Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>
</div>
<div class="result"></div>

Sorry i missed an important detail. ThisOne is generated automatically so i cant use .thisone as Selector — Kemen Paulos Plaza, Mar 08 '17 at 09:20
Isn't that class goes for table? why don't you look for the table instead and filter with id. — jagdish.narkar, Mar 08 '17 at 18:42

JQuery Find closest parent with class

2 Answers2