How to use 'this' in multiple classes jquery

1201 views javascript
-3

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>

answered question

2 Answers

2

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>

posted this
8

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!

posted this

Have an answer?

JD

Please login first before posting an answer.