使用 jQuery 隐藏父 div答案

【问题标题】：Hiding Parent Div with jQuery使用 jQuery 隐藏父 div
【发布时间】：2022-01-19 18:16:59
【问题描述】：

我有一个值 9 的 div，我想隐藏它。这就是我目前所拥有的。但它不起作用......

我的隐藏功能：


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

HTML

<div class="hhpt-colorbox hhpt-housebox">
   <div class="hhpt-clickbox" mychoice="0" myvalue="9"><span class="hhpt-housethumb"></span>
<span class="hhpt-housetitle">Chicken Coop<span></span></div>
   <a class="hhpt-greencirclebutton hhpt-infocorner" href="#hhpt-pop-9" rel="hhpt-modal:open">
<i class="hhpt-icon-circle-info"></i></a>
</div>

小提琴： https://jsfiddle.net/j5t3pa82/

但是，它仍然显示：

【问题讨论】：

.hhpt-housebox 没有 value 属性并且 val() 必须 w 输入的值...我在标记中看不到任何输入
那么隐藏父 div 及其内部所有内容的正确方法是什么？
你的小提琴和你的问题不匹配。你的小提琴，一切都是隐藏的，就像你提供的代码一样，那么你的小提琴/问题中的“鸡舍”在哪里？添加一个 console.log 以查看发生了什么 - div 上的 .val() 始终为 "" 始终为 <9：jsfiddle.net/5tLo2kmx
对现有代码的最小更改是：if (($(this).attr("myvalue")*1) < 9) { - 但您应该将data-myvalue 用于自定义属性

标签： html jquery

【解决方案1】：

Div 没有值，该值仅适用于用户输入控件。

使用data-XXX 属性将特定于应用程序的数据添加到元素。然后你就可以过滤了。

此外，您要检查其值的元素似乎是 .hhpt-clickbox 子元素。

$('.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 class="hhpt-colorbox hhpt-housebox">
  <div class="hhpt-clickbox" mychoice="0" data-value="9"><span class="hhpt-housethumb"></span>
    <span class="hhpt-housetitle">Chicken Coop<span></span></div>
  <a class="hhpt-greencirclebutton hhpt-infocorner" href="#hhpt-pop-9" rel="hhpt-modal:open">
    <i class="hhpt-icon-circle-info"></i></a>
</div>

【讨论】：

或者切换它：（不值得单独回答）：$(".hhtp-clickbox").filter((i,e)=>$(e).data("value") < 9).closest(".hhpt-housebox").hide();

【解决方案2】：

div 是块元素，没有值属性。在这里，您可以通过属性和 jquery attr 获取值。

当您与整数值 9 进行比较时，获取的值将被转换为带有 + 的整数

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

【讨论】：