Question

我有一个无序列表：

<ul class="dropdown-menu">
<li class="filterMenu"><a href="#" data-path=".AirConditioning">Air Conditioning</a></li>
<li class="filterMenu"><a href="#" data-path=".Filters">Filters</a></li>
<li class="filterMenu"><a href="#" data-path=".Heating">Heating</a></li>
<li class="filterMenu"><a href="#" data-path=".Holidays">Holidays</a></li>
<li class="filterMenu"><a href="#" data-path=".HVAC/RTips">HVAC/R Tips</a></li>
<li class="filterMenu"><a href="#" data-path=".IAQ">IAQ</a></li>
<li class="filterMenu"><a href="#" data-path=".LaborShortage">Labor Shortage</a></li>
<li class="filterMenu"><a href="#" data-path=".Products">Products</a></li>
</ul>

这是一个数组：

["Air Conditioning", "Filters"]

我要做的是匹配数组＆＃34; C＆＃34;反对每个li的文本并隐藏任何具有与数组中的字符串不匹配的文本的li。在这种情况下，只有＆＃34;空调＆＃34;和＆＃34;过滤器＆＃34;应该保留在生成的无序列表中。

jQuery代码

这段代码基本上比较了2个数组来创建一个差分数组（我在上面显示的数组。但是，我仍然坚持如何评估li文本并与差分数组进行比较并隐藏任何不匹配。

$(function() {

    // Arrays to compare to
    arrayOne = ["Air Conditioning", "Filters", "Heating", "Holidays", "HVAC/R Tips", "IAQ", "Labor Shortage", "Products"];
    arrayTwo = ["Heating", "Holidays", "HVAC/R Tips", "IAQ", "Labor Shortage", "Products"];

    // Create differential array
    var A = arrayOne,
        B = arrayTwo,
        C = [];

    $.each(A, function(i, e) {
        if ($.inArray(e, B) == -1) C.push(e);
    });

    // Log Differential Array
    console.log(C);

    // C = ["Air Conditioning", "Filters"]

});

I created a Fiddle if that is helpful.

谢谢！

Answer 1

我要做的是将数组与每个li的文本进行匹配，并隐藏任何文本与数组中的字符串不匹配的文字。

为了实现此目的，您可以filter使用indexOf() li并仅返回包含文字内容的li（即：Node.textContent + react-iframe） C 数组。

过滤器是：

$('.dropdown-menu li').filter(function(idx, ele) {
    return C.indexOf(ele.textContent) == -1;
}).hide();

＆＃13;

var arrayOne = ["Air Conditioning", "Filters", "Heating", "Holidays", "HVAC/R Tips", "IAQ", "Labor Shortage", "Products"];
var arrayTwo = ["Heating", "Holidays", "HVAC/R Tips", "IAQ", "Labor Shortage", "Products"];

// Compare all category array with current tab array and get string difference
var A = arrayOne,
        B = arrayTwo,
        C = [];

$.each(A, function(i, e) {
    if ($.inArray(e, B) == -1) C.push(e);
});


$('.dropdown-menu li').filter(function(idx, ele) {
    return C.indexOf(ele.textContent) == -1;
}).hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul class="dropdown-menu">
    <li class="filterMenu"><a href="#" data-path=".AirConditioning">Air Conditioning</a></li>
    <li class="filterMenu"><a href="#" data-path=".Filters">Filters</a></li>
    <li class="filterMenu"><a href="#" data-path=".Heating">Heating</a></li>
    <li class="filterMenu"><a href="#" data-path=".Holidays">Holidays</a></li>
    <li class="filterMenu"><a href="#" data-path=".HVAC/RTips">HVAC/R Tips</a></li>
    <li class="filterMenu"><a href="#" data-path=".IAQ">IAQ</a></li>
    <li class="filterMenu"><a href="#" data-path=".LaborShortage">Labor Shortage</a></li>
    <li class="filterMenu"><a href="#" data-path=".Products">Products</a></li>
</ul>

＆＃13;

Answer 2

你可以这样做：

    // loop through every link
    // get the text of the link
    // compare it
    // hide those that don't match (hide their parent element, that is: the li element containeing the link)
    $('li a').each(function(i, e) {
        const linkText = e.innerHTML;

      if($.inArray(linkText, C) == -1) {
        $(e).parent().hide()
      }
    });

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu">
<li class="filterMenu"><a href="#" data-path=".AirConditioning">Air Conditioning</a></li>
<li class="filterMenu"><a href="#" data-path=".Filters">Filters</a></li>
<li class="filterMenu"><a href="#" data-path=".Heating">Heating</a></li>
<li class="filterMenu"><a href="#" data-path=".Holidays">Holidays</a></li>
<li class="filterMenu"><a href="#" data-path=".HVAC/RTips">HVAC/R Tips</a></li>
<li class="filterMenu"><a href="#" data-path=".IAQ">IAQ</a></li>
<li class="filterMenu"><a href="#" data-path=".LaborShortage">Labor3 Shortage</a></li>
<li class="filterMenu"><a href="#" data-path=".Products">Products</a></li>
</ul>

{{1}}

如果在Array中找不到li文本，请删除li

3 个答案: