title: Use jQuery selectors for complex element selection
body: <p>I have a set of <code>span</code> elements. I also have a set of <code>&lt;div&gt;</code> elements.
  When I click on a span, I consider it as "disabled". In particular, I store the "is disabled" property in an array (<em>false</em> for disabled, <em>true</em> otherwise); all the span elements are enabled at the beginning.</p>
  
  <p>Each span has an integer id which comes from a DB value. I store this id in an HTML5 attribute named <em>data-code</em>.</p>
  
  <p>Each div has a list of white-space separated integers. Each of these integers refer to the span's data-code. They are stored in the div attribute <em>data-lst</em>.</p>
  
  <p>The following is an example of a possible HTML code:</p>
  
  <pre><code>&lt;span data-code="1"&gt;A text&lt;/span&gt;|&lt;span data-code="2"&gt;Another txt&lt;/span&gt;|&lt;span data-code="3"&gt;Some text here&lt;/span&gt;|&lt;span data-code="4"&gt;bla bla&lt;/span&gt;
  
  &lt;div data-lst="1 2 3 4"&gt;...&lt;/div&gt;
  &lt;div data-lst="1 3 4"&gt;...&lt;/div&gt;
  &lt;div data-lst="2 3"&gt;...&lt;/div&gt;
  &lt;div data-lst="1 2 3"&gt;...&lt;/div&gt;
  &lt;div data-lst="1"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>When I click on a span, it becomes "disabled" and I have to check if some div can be hidden (by using <code>display:none</code>). A div can be hidden if and only if each integer in <em>data-lst</em> corresponds to the id stored in data-code of a span that "is disabled".
  Some necessary examples:</p>
  
  <ol>
  <li>If I click on the span with <em>data-code 1</em>, then the last div is set to <code>display:none</code>.</li>
  <li>Then, If I click on span with <em>data-code 3</em>, nothing happens, since there is no div with all the codes in data-lst disabled (e.g. "1", "3" or "1 3").</li>
  <li>Finally, when I click on span with <em>data-code 2</em>, then the third and fourth span are set to <code>display:none</code>.</li>
  </ol>
  
  <p>I'm trying to use selectors and <strong>JQuery</strong> to set display:none to the divs such that the criteria above are satisfied, but I didn't found a solution at the moment.</p>
  
  <p>A starting peace of code could be the following:</p>
  
  <pre><code>$(function(){
    var enabled = new Array();
    $('span').each(function(i){
      enabled[i] = true;
      $(this).click(function(){
  
        //Set display:none to all the divs that satisfy the above criteria 
        functionX();          
  
      });
    });
  });
  </code></pre>
  
  <p>What is missing is <code>functionX()</code>, that should select all the divs corresponding to the criteria.</p>