MorRob MorRob - 4 months ago 12
jQuery Question

Jquery find parent element looking for the first element with specific data

I want to retrieve tagName, classname and data info (data-droprow="7", in this case) of the parent of the first element of class ".item assigned" that has data-rowtm="1"

<table class="otable">
<tbody>
<tr class="batt" data-rowbatt="1">
<td class="drop droppable" data-droprow="3"></td>
<td class="drop droppable" data-droprow="4"></td>
<td class="drop droppable" data-droprow="5"></td>
<td class="drop droppable" data-droprow="6"></td>
<td class="drop droppable" data-droprow="7">
<div class="item assigned" data-rowtm="1" data-endtm="13" data-starttm="7"></div>
</td>
<td class="drop droppable" data-droprow="8"></td>
<td class="drop droppable" data-droprow="9">
</tr>
</tbody>
</table>


something similar to :

var $div = $(".drop droppable").find("[data-rowtm='" + variable + "']");

Jai Jai
Answer

You need to .filter() the td elements:

var td = $('.otable .drop.droppable').filter(function(){
   return $(this).find('.item.assigned').length !== 0;
});

console.log('tag ::::->', td.prop('tagName'))
console.log('data-droprow ::::->', td.data('droprow'))
console.log('class ::::->', td.attr('class'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="otable" width='500' border='1'>
  <tbody>
    <tr class="batt" data-rowbatt="1">
      <td class="drop droppable" data-droprow="3"></td>
      <td class="drop droppable" data-droprow="4"></td>
      <td class="drop droppable" data-droprow="5"></td>
      <td class="drop droppable" data-droprow="6"></td>
      <td class="drop droppable" data-droprow="7">
        <div class="item assigned" data-rowtm="1" data-endtm="13" data-starttm="7">dd7</div>
      </td>
      <td class="drop droppable" data-droprow="8"></td>
      <td class="drop droppable" data-droprow="9">
    </tr>
  </tbody>
</table>

Comments