Use dynamically created variables in jQuery filter function

Question

Meanwhile know how to create a Count based list of Variables (see Create dynamic variable names based on count result).

But now I also need to know how to use this dynamic list of variables inside a filter function that looks like this so far:

$("div.item")
  .filter(function( index ) {
  return $(this).data("sample1") == samplevariable1 &&
         $(this).data("muster1") == mustervariable1;
}).css( "border", "3px double red" );

There can be 1 to x dynamically created Variables instead of SampleVariable1, SampleVariable2.

How can I rewrite my existing filter function so that I can use it for as many variables as needed?

Thank you for your help!!

JSFiddle: https://jsfiddle.net/SchweizerSchoggi/30od7vf8/58/

can you provide working fiddle? its more helpful solve your problem — prasanth
– prasanth, Commented Feb 18, 2019 at 13:53
The notion of constructing "dynamic variable names" comes up a lot, and it's almost 100% of the time a misunderstanding of JavaScript idiom and/or failure to recognize the applicability of simple arrays. Why can't you just have a "simpleVariable" array and use a numeric index? — Pointy
– Pointy, Commented Feb 18, 2019 at 13:54
@Pointy I have added a fiddle now. How can this be made easier...? — JonSnow
– JonSnow, Commented Feb 18, 2019 at 16:19

hc_dev · Accepted Answer · 2019-02-18 18:55:03Z

Supposed you want to highlight a DIV-list based on matching some generated values

In the following solution based on your provided fiddle you will find:

a generator-function which fills two arrays with consecutive numbers (generates up to N values). See answered array-approach to your corresponding question Create dynamic variable names based on count result
a modification-function which simulates some changes of the previously generated values (as this could happen in your script as you said)
a filter-and-highlight-function which selects HTML-elements using jQuery (for DIV elements with class 'item') and filter them based on matching their DATA-attributes with the corresponding array-elements. This filtered HTML-elements will be highlighted using specified CSS-border.

Note: different indexing

An array in JS usually is indexed starting with 0 (first element) and ending with N (where array has N+1 elements).
Your data-attributes inside the HTML's DIV-elements (i.e. data-sample1 or data-muster1) are indexed starting with 1. So the solution has defined a special index-variable: let divIndex = i+1;

/* N: used to generate N initial values as arrays */
const SEGMENT_COUNT = 2;
/* contains two dynamically generated arrays */
var generatedData = {elementsCount: 0, sample: [], muster: []};


/* Generate dynamic variables:
Creates two arrays named 'sample' and 
muster' inside sampleMusterArrays. These arrays are each filled with elementsCount elements (so that elements can be index from 0 to elementsCount-1 ). */
function generateValues(sampleMusterArrays, elementsCount) {
  for (let i = 0; i < elementsCount; i++) {
    sampleMusterArrays.sample[i] = i+1;
    sampleMusterArrays.muster[i] = i+1;
  }
  sampleMusterArrays.elementsCount = elementsCount;
}

function modifyGeneratedValues() {
  // modify FIRST value in sample-array
  generatedData.sample[0] = '2';
  // modify SECOND value in sample-array
  generatedData.sample[1] = 'x';
  // modify FIRST value in muster-array
  generatedData.muster[0] = '3';
  // modify SECOND value in muster-array
  generatedData.muster[1] = 'x';
}

/* filter DIVs with class "item" based on matching sampleMusterArrays to corresponding data-values */
function highlightFilteredDivItems(sampleMusterArrays) {

  $( "div.item" )
    .filter(function( index ) {
      let foundMatch = false;
      for (var i=0; i < sampleMusterArrays.elementsCount; i++) {
        let divIndex = i+1;
        foundMatch = foundMatch ||
             $(this).data("sample"+divIndex) == sampleMusterArrays.sample[i] &&
             $(this).data("muster"+divIndex) == sampleMusterArrays.muster[i];
     } // end for-loop
     return foundMatch;
    }).css( "border", "3px double red" );
    
}

/* MAIN */

// generate data
generateValues(generatedData, SEGMENT_COUNT);
console.log("--- generated values: ", generatedData);

/* do other stuff in between              */
/* e.g. arbitratily modify generated data */
modifyGeneratedValues();
console.log("--- modified generated values: ", generatedData);

// only the first Div should be marked
highlightFilteredDivItems(generatedData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="item" data-sample1="2" data-muster1="3">Div 1</div>
<div class="item" data-sample1="3" data-muster1="3">Div 2</div>
<div class="item" data-sample1="4" data-muster1="3">Div 3</div>

this is awesome! You not only solved my problem, but you also described step by step how to do it, so that I can learn from that. Really amazing and I would buy you a coffee or whatever if you were here in the same office.. Thanks again!!

Collectives™ on Stack Overflow

Use dynamically created variables in jQuery filter function

1 Answer 1

Supposed you want to highlight a DIV-list based on matching some generated values

Note: different indexing

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Supposed you want to highlight a DIV-list based on matching some generated values

Note: different indexing

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related