Hiding Parent Div with jQuery-CodePudding

I have a div I am trying to hide with a value of 9. This is what I have so far. But it's not working...

My Hide Function:


<script>
$('.hhpt-housebox').each(function() {
          if($(this).val() < 9){
              $(this).parent().hide();
          }
});
</script>

HTML

<div >
   <div  mychoice="0" myvalue="9"><span ></span>
<span >Chicken Coop<span></span></div>
   <a  href="#hhpt-pop-9" rel="hhpt-modal:open">
<i ></i></a>
</div>

FIDDLE:

CodePudding user response：

Divs don't have a value, that's only available for user input controls.

Use a data-XXX attribute to add application-specific data to elements. Then you can filter on that.

Also, it looks like the elements whose value you want to check are the .hhpt-clickbox child elements.

$('.hhpt-housebox').filter(function() {
  return $(this).find(".hhtp-clickbox").data("value") < 9;
}).hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
  <div  mychoice="0" data-value="9"><span ></span>
    <span >Chicken Coop<span></span></div>
  <a  href="#hhpt-pop-9" rel="hhpt-modal:open">
    <i ></i></a>
</div>

CodePudding user response：

div is a block element and doesn't have value attributes. Here, you can fetch the value through the attributes and with jquery attr.

As you're comparing with the integer value 9, the fetched value is casted to integer with

$(function() {
  $('.hhpt-clickbox').each(function() {
        
  var val =  ($(this).attr("myvalue")); //casting to integer
  
    if (val < 9) {
      $(this).parent().hide();
    }
  });
});