根据子元素的值隐藏父元素

Question

我想创建一个过滤器函数，该函数根据p标签的值隐藏div。 该行为应为以下情况：

用户选择一个过滤器，例如> 5 ：

• 遍历具有特定类别的所有p标签
• 如果p标签内的值与过滤条件匹配（> 5），则隐藏每个p标签的所有父级div，该值与过滤条件值不匹配

我的解决方案如下：

function eraseThis() {

counter = 0
tagList = document.getElementsByClassName("rating")

$(".rating").each(function()
{
if (this.innerHTML < 5) {
     $(this).parent().hide() 
}

counter = counter + 1

    });
}

这给了我想要的结果，但是我想知道是否有一种更优雅/更有效的方法？

标记将类似于：

<div class="movie">
 <p class="rating"> some value </p>
</div>

<div class="movie">
 <p class="rating"> some value </p>
</div>

等等

Answer 1

我认为这应该可以解决问题：

jQuery代码：

function eraseThis() {
    var tagList = $(".rating");
    tagList.each(function(){

        var $this = $(this);
        if (parseInt( $this.text() ) < 5) {
            $this.parent().hide();
        }

    });
}

HTML代码：

<div class="movie">
 <p class="rating">2</p>
</div>

<div class="movie">
 <p class="rating">9</p>
</div>

这是完整的代码： JSFiddle