Sudhanshu Saini Sudhanshu Saini - 4 months ago 8
HTML Question

Filter out whole div on the basis of inner elements

it's gonna be quite difficult for me to put everything here in short.
Assume all the classes are already styled in css.

I have several divs of same class like this:-



<div id="s1" class="perschoolcontainer">
<a href="abc.jpg" >
<img id="dp1" class="dp" src="abc.jpg">
</a>
<p>Cricket</p>
</div>
<div id="s2" class="perschoolcontainer">
<a href="def.jpg" >
<img id="dp2" class="dp" src="def.jpg">
</a>
<p>Tennis</p>
</div>
<div id="s3" class="perschoolcontainer">
<a href="ghi.jpg" >
<img id="dp3" class="dp" src="ghi.jpg">
</a>
<p>Tennis</p>
</div>





they are the children of parent div with id=show



<div id="show">
<div id="s1" class="perschoolcontainer">
<a href="abc.jpg" >
<img id="dp1" class="dp" src="abc.jpg">
</a>
<p>Cricket</p>
</div>
<div id="s2" class="perschoolcontainer">
<a href="def.jpg" >
<img id="dp2" class="dp" src="def.jpg">
</a>
<p>Tennis</p>
</div>
<div id="s3" class="perschoolcontainer">
<a href="ghi.jpg" >
<img id="dp3" class="dp" src="ghi.jpg">
</a>
<p>Tennis</p>
</div>
</div>





i want to hide those children of show who don't have Tennis in their 'p'.
And this starts from a selection menu.



<ul class="list">
<li>
<label>
<input type="checkbox" value="Tennis" class="check">Tennis
</label>
</li>

<li>
<label>
<input type="checkbox" value="Cricket" class="check">Cricket
</label>
</li>
</ul>





Now whichever option i select from these two options, the .perschoolcontainer div which doesn't have that selected option present into should get removed.



$(document).ready(function(){
if($('input.check').is(':checked')){
var value = $.trim($(this).val());
if(value != $trim($("#show").children(".perschoolcontainer").children("p").text())){
$(this).parents("div").css("display","none");
}
}
});





What's wrong with the jquery function here.
It is basically supposed to collect the value which is selected. Then it traverses in #show and if the text is not equal to the value then the parent div of this element should be hidden.

Thnx in advance :)

Answer

It looks like you're checking to see if one of the inputs is checked at the start when what you really want is to hide the divs when the input is checked.

$(function() {

  $(document).on('change', '.check', function() {
    var checkVal = $('.check:checked').val();
    $('#show .perschoolcontainer p').each(function() {
      if ($(this).text() == checkVal) {
        $(this).closest('.perschoolcontainer').hide();
      } else {
        $(this).closest('.perschoolcontainer').show();
      }
    });
  });
  
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="show">
  <div id="s1" class="perschoolcontainer">
	<a href="abc.jpg" >
		<img id="dp1" class="dp" src="abc.jpg">
	</a>
	<p>Cricket</p>
  </div>
  <div id="s2" class="perschoolcontainer">
	<a href="def.jpg" >
		<img id="dp2" class="dp" src="def.jpg">
	</a>
	<p>Tennis</p>
  </div>
  <div id="s3" class="perschoolcontainer">
	<a href="ghi.jpg" >
		<img id="dp3" class="dp" src="ghi.jpg">
	</a>
	<p>Tennis</p>
  </div>
</div>

<ul class="list">
  <li>
	<label>
      <input type="checkbox" value="Tennis" class="check">Tennis
    </label>
  </li>
  
  <li>
	<label>
      <input type="checkbox" value="Cricket" class="check">Cricket
    </label>
  </li>
</ul>

Comments