Select div von Attributdaten mit JSON

Question

In meinem each() würde Ich mag an:

1. ausblenden alle divs, wo die data-infos.grpid = $jQuery(this).data('infos').grpid

2. die nächste div zeigen, wo data-infos.ordre = $jQuery(this).data('infos').next_ordre

I Ich weiß nicht, wie man ein "wo" mit dem Datenattribut macht und ein "ausblenden" oder "anzeigen" darauf macht.

jQuery("div[testid]:visible").each(function() { 
    //Hide all div with same data-infos grpid 
    //display the next one with 'next_ordre' (ordre=2 in this example) 
});  

<div testid="afcnG0tN" data-infos='{"banid":"3cxWET0T", "grpid":"12c0RNPo", "ordre":"1", "next_ordre":"2"}'>Test 1</div> 
<div testid="afcnG0tN" data-infos='{"banid":"0i9fIbei", "grpid":"12c0RNPo", "ordre":"2", "next_ordre":"3"}' style="display: none">Test 2</div> 
<div testid="afcnG0tN" data-infos='{"banid":"pTgfUFLf", "grpid":"12c0RNPo", "ordre":"3", "next_ordre":"1"}' style="display: none">Test 3</div> 

Answer 1

jQuery("div[testid]:visible").each(function() { 
    var $that = $(this), 
     data = $that.data('infos'), 
     hideDivs = getTargetDiv('grpid', data.grpid), 
     showDivs = getTargetDiv('ordre', data.next_ordre); 

    hideDivs.forEach(function($div) { 
     $div.hide(); 
    }); 

    showDivs.forEach(function($div) { 
     $div.show(); 
    }); 
}); 

// Select some divs that pass the given check 
function getTargetDiv (key, value) { 
    var results = []; 
    $('[data-infos]').each(function() { 
     var $that = $(this), 
      data = $that.data('infos'); 

     if(data[key] == value) results.push($that); 
    }); 

    return results; 
} 

Arbeits JSFiddle: https://jsfiddle.net/LeoAref/fxzhfvoz/

---

Ein anderer Weg:

jQuery("div[testid]:visible").each(function() { 
    var $that = $(this), 
     data = $that.data('infos'); 

    doActionOnTargetDiv('grpid', data.grpid, 'hide'); 
    doActionOnTargetDiv('ordre', data.next_ordre, 'show') 
}); 

function doActionOnTargetDiv (key, value, action) { 
    $('[data-infos]').each(function() { 
     var $that = $(this), 
      data = $that.data('infos'); 

     if(data[key] == value) { 
      if(action === 'hide') { 
       $that.hide() 
      } else if(action === 'show') { 
       $that.show(); 
      } 
     } 
    }); 
} 

Answer 2

hier ist mein Code

$(document).ready(function(){ 
    $("div[testid]:visible").each(function() { 
     if($(this).attr('testid') === $(this).data('infos').grpid){ 
      $(this).hide(); 
     }   
    }); 
}); 

lassen Sie mich zu verstecken wissen, ob das hilft, hier können Sie das Attribut überprüfen === Datenwert, können Sie auch für andere Scheck tun . danke

Answer 3

Stellen Sie sich vor, dass Sie zunächst eine Datenstruktur mit ersten Informationen definieren zu erfüllen:

var dataInfos = { 
     grpid = "12345", 
     ordre = "2" 
    }, 
    nextOrdre; 

T Wenn Sie iterieren würden, um zu finden, welcher zu verbergen ist, und dann iterieren, um den anderen zu zeigen, der dem next_ordre entspricht: