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

Question

我想创建一个过滤函数，它根据 p 标签的值隐藏 div。行为应如下所示：

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

• 循环遍历具有特定类的所有 p-tag
• 如果 p-tag 中的值与过滤器匹配 (>5)，则隐藏每个 p-tag 的值与过滤器值不匹配的所有父 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