如何在多个类jQuery中使用'this'

Question

I am hiding 'hidden-items' class li elements using jquery and want to show them once more tag link is clicked. The jquery part is working, but all the list items are being showed. I searched about this and found out about 'this' selector. But I am confused on how to use this to show items that are close to more tags link.

<div class="tag-box">
 <ul class='gk-tags'>
  <li><a href='/category/economic' class='gk-tag'>Economic</a></li>
  <li><a href='/category/test' class='gk-tag'>Test</a></li>
  <li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li>
  <li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li>
 </ul>
 <a class='tag-show-more'>more tags</a>
</div>

<div class="tag-box">
 <ul class='gk-tags'>
  <li><a href='/category/test' class='gk-tag'>Test</a></li>
  <li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li>
  <li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li>
 </ul>
 <a class='tag-show-more'>more tags</a>
</div>

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery('.hidden-items').hide();
  jQuery('.tag-show-more').click(function(){
     jQuery('.hidden-items').show();
  });
});
</script>

Answer 1

Based on the structure of your HTML, you can use .prev() and .find() with this like:

jQuery(this).prev('.gk-tags').find('.hidden-items').show();

 jQuery(document).ready(function(){ jQuery('.hidden-items').hide(); jQuery('.tag-show-more').click(function(){ jQuery(this).prev('.gk-tags').find('.hidden-items').show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tag-box"> <ul class='gk-tags'> <li><a href='/category/economic' class='gk-tag'>Economic</a></li> <li><a href='/category/test' class='gk-tag'>Test</a></li> <li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li> <li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li> </ul> <a class='tag-show-more'>more tags</a> </div> <div class="tag-box"> <ul class='gk-tags'> <li><a href='/category/test' class='gk-tag'>Test</a></li> <li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li> <li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li> </ul> <a class='tag-show-more'>more tags</a> </div> 

Answer 2

just use $(this) for the selection of the current clicked element.

then use .parents('.classNameOfParent') to get the parent element

then hide the parent element

.hide()

you could do this like that:

 $(this).parents('.classNameOfParent').hide()

good luck!

Answer 3

 jQuery(document).ready(function(){
      jQuery('.hidden-items').hide();
      jQuery('.tag-show-more').click(function(){
         jQuery(this).closest(".tag-box").find('.hidden-items').show();
      });
    });

Hope it helps. Thanks.

Answer 4

你可以这样

jQuery(this).siblings('.gk-tags').find('.hidden-items').show();