基于子元素值的隐藏父元素

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