Querying Using Multiple Filter Selectors

Question

Querying Using Multiple Filter Selectors

Currently, I am in the process of developing a jQuery multiple filter module and have encountered a logic gap in my framework.

Within this module, there are numerous div elements each containing data-x and data-y attributes.

For instance:

<div class="divClass" data-x = "1" data-y="2">1</div>
<div class="divClass" data-x = "2" data-y="3">2</div>
<div class="divClass" data-x = "3" data-y="2">3</div>
<div class="divClass" data-x = "4" data-y="1">4</div>

This setup results in:

Upon selecting the values 2 and 3 for the y attribute along with 1 for the x attribute from the select boxes,

The desired query would be x = 1 and y = 2 or 3

Thus, it should display products

with data-y as 2 or 3 and data-x as 1

thus presenting products 1 and 2

You can view my Fiddle here

$('[data-x="1"],[data-y="2"],[data-y="3"]').each(function(){
    $("#result").append($(this).text() + ",");
});

The current implementation retrieves all products. My inquiry revolves around refining the query within the selector so I may effectively utilize the jQuery filter.

javascript jquery css

Answer 1

Answer №1

Representation of

((x == 1) && ((y == 2) || y == 3)))

:

$(function(){
  // One approach:
  $('[data-x="1"][data-y="2"],[data-x="1"][data-y="3"]').css('color','red');
  
  // In my opinion, more succinct:
  $('[data-x="1"]').find('[data-y="2"],[data-y="3"]').css('font-weight', '800');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="divClass" data-x="1" data-y="1">1-1</div>
<div class="divClass" data-x="1" data-y="2">1-2</div>
<div class="divClass" data-x="1" data-y="3">1-3</div>
<div class="divClass" data-x="2" data-y="1">2-1</div>
<div class="divClass" data-x="2" data-y="2">2-2</div>
<div class="divClass" data-x="2" data-y="3">2-3</div>
<div class="divClass" data-x="3" data-y="1">3-1</div>
<div class="divClass" data-x="3" data-y="2">3-2</div>
<div class="divClass" data-x="3" data-y="3">3-3</div>

(However, based on your query, you were anticipating two matches. I only observe one match with the provided code. To illustrate the match, I've included 9 variations of x/y values)

If you prefer a cleaner solution:

(function($){
  // helper: return jQuery selector based on supplied attribute name.
  var _mapToAttr = function(attr){
    return function(v){ return '[' + attr + '="' + v + '"]'; };
  }
  
  // polyfill: Array.prototype.map
  if (!Array.prototype.map){
    Array.prototype.map = function(func){
      if (this.length == 0) return [];
      var result = [];
      for (var i = 0; i < this.length; i++){
        result.push(func(this[i]));
      }
      return result;
    };
  }
  
  // $.XY(x,y)
  //
  // Params:
  //   @x   = single value or an array of possible values
  //   @y   = single value or an array of possible values
  //
  // Usage:
  //   $.XY(1,2)
  //     Find all elements with an x value of 1 and a y
  //     value of 2.
  //   $.XY(2,[3,4])
  //     Find all elements with an x value of 2 and a y
  //     value of either 3 or 4.
  $.XY = function(x,y){
    // validation: confirm x and y are defined
    if (typeof x === 'undefined' || typeof y === 'undefined') return $([]);
    
    // normalize both values to arrays
    if (!$.isArray(x)) x = [ x ];
    if (!$.isArray(y)) y = [ y ];
    
    // validation: confirm x and y aren't empty sets
    if (!x.length || !y.length) return $([]);
    
    // create jQuery selectors from values
    var xSel = x.map(_mapToAttr('data-x')).join(','),
        ySel = y.map(_mapToAttr('data-y')).join(',');
    
    // return matching sets
    // if a third paramter was supplied, it came from our $.fn.XY()
    // call, therefore use it as an initial context to search within.
    // otherwise, search the entire document for matches.
    var set = arguments.length == 3
      ? $(arguments[2]).filter(xSel).filter(ySel)
      : $(xSel).filter(ySel);
    console.log(set);
    return set;
  };
  
  // $().XY(x,y)
  //
  // Params:
  //   @x = single value or an array of possible values
  //   @y = single value or an array of possible values
  //
  // Usage:
  //   $('.foo').XY(1,2)
  //     Find all elements with the class foo who also
  //      have an X value of 1 and a y value of 2.
  //   $('div').XY([1,2],[3,4])
  //      Find all divs with an x value of either 1 or 2
  //       and a y value of either 3 or 4.
  $.fn.XY = function(x,y){
    // perform above search, but supply an initial context.
    return $.XY(x,y,this);
  };
})(jQuery);

$.XY(1,[2,3]).css('color','red');
$('.divClass').XY(2,[1,3]).css('color','green');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div class="divClass" data-x="1" data-y="1">1-1</div>
<div class="divClass" data-x="1" data-y="2">1-2</div>
<div class="divClass" data-x="1" data-y="3">1-3</div>
<div class="divClass" data-x="2" data-y="1">2-1</div>
<div class="divClass" data-x="2" data-y="2">2-2</div>
<div class="divClass" data-x="2" data-y="3">2-3</div>
<div class="divClass" data-x="3" data-y="1">3-1</div>
<div class="divClass" data-x="3" data-y="2">3-2</div>
<div class="divClass" data-x="3" data-y="3">3-3</div>

Answer 2

Representation of

((x == 1) && ((y == 2) || y == 3)))

:

$(function(){
  // One approach:
  $('[data-x="1"][data-y="2"],[data-x="1"][data-y="3"]').css('color','red');
  
  // In my opinion, more succinct:
  $('[data-x="1"]').find('[data-y="2"],[data-y="3"]').css('font-weight', '800');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="divClass" data-x="1" data-y="1">1-1</div>
<div class="divClass" data-x="1" data-y="2">1-2</div>
<div class="divClass" data-x="1" data-y="3">1-3</div>
<div class="divClass" data-x="2" data-y="1">2-1</div>
<div class="divClass" data-x="2" data-y="2">2-2</div>
<div class="divClass" data-x="2" data-y="3">2-3</div>
<div class="divClass" data-x="3" data-y="1">3-1</div>
<div class="divClass" data-x="3" data-y="2">3-2</div>
<div class="divClass" data-x="3" data-y="3">3-3</div>

(However, based on your query, you were anticipating two matches. I only observe one match with the provided code. To illustrate the match, I've included 9 variations of x/y values)

If you prefer a cleaner solution:

(function($){
  // helper: return jQuery selector based on supplied attribute name.
  var _mapToAttr = function(attr){
    return function(v){ return '[' + attr + '="' + v + '"]'; };
  }
  
  // polyfill: Array.prototype.map
  if (!Array.prototype.map){
    Array.prototype.map = function(func){
      if (this.length == 0) return [];
      var result = [];
      for (var i = 0; i < this.length; i++){
        result.push(func(this[i]));
      }
      return result;
    };
  }
  
  // $.XY(x,y)
  //
  // Params:
  //   @x   = single value or an array of possible values
  //   @y   = single value or an array of possible values
  //
  // Usage:
  //   $.XY(1,2)
  //     Find all elements with an x value of 1 and a y
  //     value of 2.
  //   $.XY(2,[3,4])
  //     Find all elements with an x value of 2 and a y
  //     value of either 3 or 4.
  $.XY = function(x,y){
    // validation: confirm x and y are defined
    if (typeof x === 'undefined' || typeof y === 'undefined') return $([]);
    
    // normalize both values to arrays
    if (!$.isArray(x)) x = [ x ];
    if (!$.isArray(y)) y = [ y ];
    
    // validation: confirm x and y aren't empty sets
    if (!x.length || !y.length) return $([]);
    
    // create jQuery selectors from values
    var xSel = x.map(_mapToAttr('data-x')).join(','),
        ySel = y.map(_mapToAttr('data-y')).join(',');
    
    // return matching sets
    // if a third paramter was supplied, it came from our $.fn.XY()
    // call, therefore use it as an initial context to search within.
    // otherwise, search the entire document for matches.
    var set = arguments.length == 3
      ? $(arguments[2]).filter(xSel).filter(ySel)
      : $(xSel).filter(ySel);
    console.log(set);
    return set;
  };
  
  // $().XY(x,y)
  //
  // Params:
  //   @x = single value or an array of possible values
  //   @y = single value or an array of possible values
  //
  // Usage:
  //   $('.foo').XY(1,2)
  //     Find all elements with the class foo who also
  //      have an X value of 1 and a y value of 2.
  //   $('div').XY([1,2],[3,4])
  //      Find all divs with an x value of either 1 or 2
  //       and a y value of either 3 or 4.
  $.fn.XY = function(x,y){
    // perform above search, but supply an initial context.
    return $.XY(x,y,this);
  };
})(jQuery);

$.XY(1,[2,3]).css('color','red');
$('.divClass').XY(2,[1,3]).css('color','green');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div class="divClass" data-x="1" data-y="1">1-1</div>
<div class="divClass" data-x="1" data-y="2">1-2</div>
<div class="divClass" data-x="1" data-y="3">1-3</div>
<div class="divClass" data-x="2" data-y="1">2-1</div>
<div class="divClass" data-x="2" data-y="2">2-2</div>
<div class="divClass" data-x="2" data-y="3">2-3</div>
<div class="divClass" data-x="3" data-y="1">3-1</div>
<div class="divClass" data-x="3" data-y="2">3-2</div>
<div class="divClass" data-x="3" data-y="3">3-3</div>

Querying Using Multiple Filter Selectors

Answer №1

Similar questions

What is the process for incorporating additional style attributes into the current settings of a specified component through Component Composition?

Angular does not alter the focus when a new component is loaded

Using JQuery, Ajax, and PHP for a secure login system

Prevent unauthorized users from accessing the expressjs application

Devices such as CAC cards and smart cards are not being recognized by Chrome's WebUSB feature

Is there a way for me to showcase information?

How can you use jQuery to select and manipulate multiple form inputs with a common class?

Leverage npm JavaScript packages within an Ionic2 TypeScript project

Although PhoneGap resolution remains consistent, the outcomes may vary

The combination of list-style-type and display:inline is ineffective

Unable to display content in div using jQuery ajax function

Creating Angular directives: dynamically applying ng-class directive to template elements during compilation

Using the factory pattern in a Node.js (Express) application

Encountering an undefined json array when making an AJAX request

What is the best way to ensure that text fields remain hidden upon page load until the appropriate drop down option is chosen?

Reverse the order of jQuery toggle animations

Node.JS guide on handling geonames city information

Create an HTML table to view JSON data from a cell on a map

Here is a guide on how to interact with a flash object by clicking

Issue with dragging and styling windows in Safari on iOS