Question

我试图根据孩子的内容隐藏父div：

<div class="featurevalue">Number 1: <span class="value">1</span></div>
<div class="featurevalue">Number 2: <span class="value">0</span></div>
<div class="featurevalue">Number 3: <span class="value">1</span></div>

目前我正在使用此javascript，但它隐藏了页面上同一类的所有div。我需要它才能隐藏父div。

(function($) {
    $(document).ready(function() {
        var x = $("span.value").text();
        if (x == 0){
            $("div.featurevalue").hide();
        };    
    })
})(jQuery);

有什么建议吗？

Answer 1

您可以使用.filter()获取包含指定文字的span元素，然后使用.closest()进行搜索以定位div并.hide()

＆＃13;

$("span.value").filter(function() {
  return $(this).text() === "0"
})
.closest("div.featurevalue")
.hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="featurevalue">Number 1: <span class="value">1</span></div>
<div class="featurevalue">Number 2: <span class="value">0</span></div>
<div class="featurevalue">Number 3: <span class="value">1</span></div>

＆＃13;

Answer 2

希望这会有所帮助：

$(document).ready(function() {    
    $("span.value").each(function(){
        var x = $(this).text();
        if (x == 0) {
            $(this).closest(".featurevalue").hide();
        }
    })
})

Answer 3

使用contains选择器的单行解决方案：

$("span.value:contains(0)").closest("div.featurevalue").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="featurevalue">Number 1: <span class="value">1</span></div>
<div class="featurevalue">Number 2: <span class="value">0</span></div>
<div class="featurevalue">Number 3: <span class="value">1</span></div>

或者，如果您不想使用closest()或parent()，请使用has()选择器：

$("div.featurevalue:has(span.value:contains(0))").hide();

Answer 4

使用each()循环元素并检查值并使用$(this).parent().hide()

隐藏父级

(function($) {
  $(document).ready(function() {
    $('span.value').each(function(){
      if ($(this).text() == 0){
        $(this).parent().hide();
      };
    });
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="featurevalue">Number 1: <span class="value">1</span></div>
<div class="featurevalue">Number 2: <span class="value">0</span></div>
<div class="featurevalue">Number 3: <span class="value">1</span></div>

Answer 5

只需使用.parent() jQuery函数定位特定父项，.each()遍历所有子项：

(function($) {
  $(document).ready(function() {

    $("span.value").each(function( index ) {
      if ($(this).text() == '0') {
        $(this).parent("div.featurevalue").hide();
      }
    });
  })
})(jQuery);

另外，您可以像@ patilprashant6792一样使用.closest()假设。

Answer 6

检查以下代码。我们不需要遍历我们可以简单地使用过滤器的元素。在这里，我向父母添加了一个“隐藏”类。

 $('.featurevalue span').filter(':contains("0")').parents('.featurevalue').addClass('hide');

根据孩子的内容隐藏父母

6 个答案: