CODEWITHSUNDEEP
javascriptjqueryarrays
dentalhero
dentalhero

Reputation: 699

Remove li if li text is not found in Array

I have an unordered list:

<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>

Here is an array:

["Air Conditioning", "Filters"]

What I am trying to do is match array "C" against the text of each li and hide any li's that have text that doesn't match a string in the array. In this case, only "Air Conditioning" and "Filters" should remain in the resulting unordered list.

jQuery Code

This code essentially compares 2 arrays to create a differential array(the one I displayed above. But, I'm stuck as to how to evaluate the li text and compare to the differential array and hide any non-matches.

$(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.

Thanks!

Upvotes: 0

Views: 67

Answers (3)

gaetanoM
gaetanoM

Reputation: 42054

What I am trying to do is match an array against the text of each li and hide any li's that have text that doesn't match a string in the array.

In order to achieve this you can filter the li and return only the li with a text content included (i.e.: indexOf() + Node.textContent) in the C array.

The filter is:

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


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();
<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>

Upvotes: 2

jonahe
jonahe

Reputation: 5000

You could do something like this:

    // 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()
      }
    });

Upvotes: 1

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

  var  arrayOne = ["Air Conditioning", "Filters", "Heating", "Holidays", "HVAC/R Tips", "IAQ", "Labor Shortage", "Products"];
  var C=[];

$(".dropdown-menu .filterMenu a").each(function(key,value){
   if ($.inArray($(value).text(), arrayOne ) == -1){
       C.push($(value).text());
       $(value).parent().remove()

   }
});
console.log(C);
<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>

Upvotes: 0

Related Questions