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

working solution

您只需要检查<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的原因是因为你的选择器。

您当前的选择器是＆＃39; .mylist li＆＃39;。

代码迭代以查找请求的文本，例如。＆＃39;左＆＃39;并将css添加到完整选择器。

因此，不要将课程添加到＆＃34; .mylist li ul li＆＃34;它将课程添加到＆＃34; .mylist li＆＃34; 因此整个外部的李突出。

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

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

4 个答案: