How to hide/show elements based on array?

Question

I need to filter rows in a table based on tags selected by the user.

I used the array of tags to target the class of the rows, I tried to hide the siblings but it doesn't work, it hides everything if there's more than one row, and if the user removes one tag, I need to re-show the other rows, and I didn't manage to find how to do that.

(function($, root, undefined) {

  $(function() {

    'use strict';

    // Disponibilités

    $('.ui.dropdown').dropdown();

    $('.dropdown').on('click', function(e) {
      var filters = $("input[name='filters']").val();
      var arrayFilters = filters.split(',');
      if (filters) {
        $.each(arrayFilters, function(index, value) {
          $('.' + value).siblings().hide();
        });
      } else {
        $('.uniteRow').show();
      }
    });

  });

})(jQuery, this);

<!DOCTYPE html>
<html>

<head>
  <style>
    table td {
    padding: 5px;
  }
  </style
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>


  <div class="filters">
    <div class="ui multiple dropdown">
      <input type="hidden" name="filters">
      <i class="filter icon"></i>
      <span class="text">Filter les résultats</span>
      <div class="menu">
        <div class="divider"></div>
        <div class="header">
          Disponibilité
        </div>
        <div class="scrolling menu">
          <div class="item" data-value="disponiblebientot">
            Disponible bientôt
          </div>
          <div class="item" data-value="juillet2020">
            Juillet 2020
          </div>
          <div class="item" data-value="loue">
            Loué
          </div>
        </div>
        <div class="divider"></div>
        <div class="header">
          Pièces
        </div>
        <div class="scrolling menu">
          <div class="item" data-value="pieces3">
            3 ½
          </div>
          <div class="item" data-value="pieces4">
            4 ½
          </div>
          <div class="item" data-value="pieces5">
            5 ½
          </div>
        </div>
      </div>
    </div>
  </div>

  <table class="disponibilites">
    <tbody>
      <tr>
        <td></td>
        <td>Pièces</td>
        <td>Disponibilité</td>
      </tr>
      <tr class="uniteRow loue pieces4">
        <td>101</td>
        <td>4½</td>
        <td>Loué</td>
      </tr>
      <tr class="uniteRow disponiblebientot pieces4">
        <td>102</td>
        <td>4½</td>
        <td>Disponible bientôt</td>
      </tr>
      <tr class="uniteRow loue pieces4">
        <td>103</td>
        <td>4½</td>
        <td>Loué</td>
      </tr>
      <tr class="uniteRow loue pieces3">
        <td>104</td>
        <td>3½</td>
        <td>Loué</td>
      </tr>
      <tr class="uniteRow loue pieces3">
        <td>105</td>
        <td>3½</td>
        <td>Loué</td>
      </tr>
      <tr class="uniteRow juillet2020 pieces3">
        <td>106</td>
        <td>3½</td>
        <td>Juillet 2020</td>
      </tr>
      <tr class="uniteRow juillet2020 pieces4">
        <td>718</td>
        <td>4½</td>
        <td>Juillet 2020</td>
      </tr>
    </tbody>
  </table>

</body>

</html>

So I want to show only rows that the class is in the arrayFilters, and hide those that are not there, and I want it to update each time a tag is selected/deselected.

Can you provide the relevant HTML as part of your minimal, reproducible example? — esqew
– esqew, Commented Jul 24, 2019 at 16:37
Edited the question to add JSBin, sorry for that, I'm new here — Rébecca
– Rébecca, Commented Jul 24, 2019 at 18:12
Code should be placed in a stack snippet in the question itself rather than a third party site. — justDan
– justDan, Commented Jul 24, 2019 at 18:17
@justDan Didn't know how to do that, I'll do it for future questions, thanks — Rébecca
– Rébecca, Commented Jul 24, 2019 at 18:35

Rébecca · Accepted Answer · 2019-07-24 19:18:40Z

So I modified my code to loop through the rows instead of the array and I changed the data values to classes to use .is().

I check if each row has a class inside the filters and show it, and hide the row if no classes match the filter.

(function ($, root, undefined) {

	$(function () {
		
		'use strict';
		
		// Disponibilités
		
		$('.ui.dropdown').dropdown();
		
		$('.dropdown').on('click', function(e) {
			var filters = $( "input[name='filters']" ).val();
			if(filters) {
                $('.uniteRow').each(function (index, value) {
                    if($(this).is(filters)) {
                      $(this).show();
                    } else {
                      $(this).hide();
                    }
                });
			} else {
				$('.uniteRow').show();
			}
		});
		
	});
	
})(jQuery, this);

<!DOCTYPE html>
<html>

<head>
  <style>
    table td {
    padding: 5px;
  }
  </style
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>


 <div class="filters">
	<div class="ui multiple dropdown">
		<input type="hidden" name="filters">
		<i class="filter icon"></i>
		<span class="text">Filter les résultats</span>
		<div class="menu">
			<div class="divider"></div>
			<div class="header">
				Disponibilité
			</div>
			<div class="scrolling menu">
				<div class="item" data-value=".disponiblebientot">
					Disponible bientôt
				</div>
				<div class="item" data-value=".juillet2020">
					Juillet 2020
				</div>
				<div class="item" data-value=".loue">
					Loué
				</div>
			</div>
            <div class="divider"></div>
			<div class="header">
				Pièces
			</div>
			<div class="scrolling menu">
				<div class="item" data-value=".pieces3">
					3 ½
				</div>
				<div class="item" data-value=".pieces4">
					4 ½
				</div>
				<div class="item" data-value=".pieces5">
					5 ½
				</div>
			</div>
		</div>
	</div>
</div>
  
<table class="disponibilites">
	<tbody>
		<tr>
			<td></td>
			<td>Pièces</td>
			<td>Disponibilité</td>
		</tr>
		<tr class="uniteRow loue pieces4">
			<td>101</td>
			<td>4½</td>
			<td>Loué</td>
		</tr>
		<tr class="uniteRow disponiblebientot pieces4">
			<td>102</td>
			<td>4½</td>
			<td>Disponible bientôt</td>
		</tr>
		<tr class="uniteRow loue pieces4">
			<td>103</td>
			<td>4½</td>
			<td>Loué</td>
		</tr>
		<tr class="uniteRow loue pieces3">
			<td>104</td>
			<td>3½</td>
			<td>Loué</td>
		</tr>
		<tr class="uniteRow loue pieces3">
			<td>105</td>
			<td>3½</td>
			<td>Loué</td>
		</tr>
		<tr class="uniteRow juillet2020 pieces3">
			<td>106</td>
			<td>3½</td>
			<td>Juillet 2020</td>
		</tr>
		<tr class="uniteRow juillet2020 pieces4">
			<td>718</td>
			<td>4½</td>
			<td>Juillet 2020</td>
		</tr>
	</tbody>
</table>

</body>

</html>

Collectives™ on Stack Overflow

How to hide/show elements based on array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related