使用jQuery在嵌套列表中查找包含特定文本的列表项

Question

我正在努力建立一种使用“修饰符”或属性的单选组来选择或过滤列表的方法。 我正在过滤的列表可以是多层嵌套ul-li。

我的最终目标是只显示具有正确属性或文本的预期列表项，而其他列表项将被隐藏。

在我的示例中，我在选择自己想要的东西时遇到了问题。 如果有一个li包含我要查找的文本，它将选择整个嵌套的ul。

这是我制作的jsFiddle

$('.refine').on('change', 'input[type="radio"]', function() {

    var sortattr = $(this).val();   

    $(".mylist li:contains('" + sortattr + "')").each(function() {
        $(this).addClass('here');
    });
});

<form class="refine" role="form">
    <input type="radio" value="left" name="modifiers" id="reflatleft">Left
    <input type="radio" value="right" name="modifiers" id="reflatright">Right
    <input type="radio" value="unspecified" name="modifiers" id="reflatunspecifed">Unspecified
</form>                         

<ul class="mylist">
    <li>item misc header
      <ul>
        <li>item left</li>
        <li>item right</li>
        <li>item left</li>
        <li>item unspecified</li>
        <li>item somethings else</li>
      </ul>
    </li>
    <li>item left</li>
    <li>item right</li>
    <li>item left</li>
    <li>item unspecified</li>
    <li>item somethings else</li>
</ul>

Answer 1

为li添加默认样式：

li{
    color: #000;
    font-weight: normal;
}

Answer 2

首先创建如下的数组

var myArray=new Array();

然后

像下面那样挤你的内容

myArray.push(item you want to push);

Answer 3

工作解决方案

您只需要检查<li>是否有任何子元素要突出显示即可，因此只需添加if构造即可解决问题。

$('.refine').on('change', 'input[type="radio"]', function() {

    var sortattr = $(this).val();   

    $(".mylist li:contains('" + sortattr + "')").each(function() {
        if($(this).children().length == 0){
            $(this).addClass('here');
        }
    });
});

Answer 4

之所以选择整个li是因为您的选择器。

您当前的选择器是“ .mylist li”。

您对代码进行迭代以找到所需的文本，例如。 'left'，它将css添加到完整的选择器中。

因此，不是将类添加到“ .mylist li ul li”，而是将类添加到“ .mylist li ul”，因此整个外部li被突出显示。

您可以使用.has遍历嵌套的ul li