Muli Muli - 3 months ago 17
jQuery Question

target separetly div element

When I have more than one

<td>
and I click on my button it opens all list in the table, and I don't want that. I want to open it only in the
<tr>
that one specifically.
I don't know how to target it individually only with one javascript code.

Html code:

<table class="block-IPs-table" id="block-IPs-table">
<thead>
</thead>
<tbody>
<tr class="odd gradeX">
<td class="widht-400 vertical-align-bottom">
<div class="menu-toggle-left clearfix pull-right">
<ul class="toggle-left clearfix">
<li class="">
<a href="#"><i class="fa fa-ban active-red fa-2x"></i></a>
</li>
<li class="">
<a href="#"><i class="fa fa-times fa-2x"></i></a>
</li>
</ul>
<button class="btn btn-toggle btn-left-click" type="button" id=""><i class="fa fa-ellipsis-h fa-2x" aria-hidden="false"></i></button>
</div><!-- menu toggle -->
</td>
</tr>
</tbody>
</table>


this is my javascript code:

var menuWrapper = $('.menu-toggle-left'),
button = menuWrapper.find('.btn-toggle'),
menu = menuWrapper.find('ul');
menu.hide()
$(".btn-toggle").on('click', function(){
menu.toggle("fast");
});


An image how it looks when I click one:
enter image description here

Answer

To toggle only the ul element within the same parent:

$(".btn-toggle").on('click', function(){
  $(this).closest("div").find("ul").toggle("fast");
});

That is, navigate through the DOM by starting with the clicked element (this), going up to its containing div, then back down to the ul.

In context demo:

$(".btn-toggle").on('click', function(){
  $(this).closest("div").find("ul").toggle("fast");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="block-IPs-table" id="block-IPs-table">
<thead>
</thead>
<tbody>
    <tr class="odd gradeX">
        <td class="widht-400 vertical-align-bottom">
            <div class="menu-toggle-left clearfix pull-right">
              <ul class="toggle-left clearfix">
                <li class="">
                    <a href="#">Item a1<i class="fa fa-ban active-red fa-2x"></i></a>
                </li>
                <li class="">
                    <a href="#">Item a2<i class="fa fa-times fa-2x"></i></a>
                </li>
            </ul>
              <button class="btn btn-toggle btn-left-click" type="button" id=""><i class="fa fa-ellipsis-h fa-2x" aria-hidden="false">Toggle</i></button>
            </div><!-- menu toggle -->
        </td>
    </tr>
      <tr class="odd gradeX">
        <td class="widht-400 vertical-align-bottom">
            <div class="menu-toggle-left clearfix pull-right">
              <ul class="toggle-left clearfix">
                <li class="">
                    <a href="#">Item b1<i class="fa fa-ban active-red fa-2x"></i></a>
                </li>
                <li class="">
                    <a href="#">Item b2<i class="fa fa-times fa-2x"></i></a>
                </li>
            </ul>
              <button class="btn btn-toggle btn-left-click" type="button" id=""><i class="fa fa-ellipsis-h fa-2x" aria-hidden="false">Toggle</i></button>
            </div><!-- menu toggle -->
        </td>
    </tr>
</tbody>
</table>