title: jQuery: Selecting the second element when selectors are same using :eq
body: <p>I have the following code. There are two svg elements with same selectors , and i'm trying to select all the elements. </p>
  
  <p>When i use  selector <code>[inner-text='" + innerText + "'][depth='" + depth + "']</code> I will be able to access the first element. When i try to access the second element using <code>:eq(2)</code> it gives an error <code>Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '[inner-text='Exchanges data with'][depth='3']:eq(2)' is not a valid selector.</code> How can i access all the elements ( say loop over all the elements in case the selectors are same )</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$( document ).ready(function() {
      console.log( "ready!" );
    var innerText = "Exchanges data with";
    var depth = "3";
    $( "#btn" ).click(function() {
       point1 = jQuery(d3.selectAll("[inner-text='" + innerText + "'][depth='" + depth + "']")[0]).attr('transform').toString();
      
      alert(point1);
      
      point2 = jQuery(d3.selectAll("[inner-text='" + innerText + "'][depth='" + depth + "']:eq(2)")[0]).attr('transform').toString();
      
    
  });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;svg&gt;
  
    &lt;g class="node" transform="translate(10,10)" inner-text="Exchanges data with" nodeid="4-3" parent-list="test asset 1" child-list="test asset 9-" parent-id="6-2" child-id="-3" has-child="true" depth="3"&gt;
      &lt;circle r="4.5"&gt;&lt;/circle&gt;
    &lt;/g&gt;
  
    &lt;g class="node" transform="translate(20,20)" inner-text="Exchanges data with" nodeid="2-3" parent-list="test asset 6" child-list="" parent-id="1-2" child-id="" has-child="true" depth="3"&gt;
      &lt;circle r="4.5" style="stroke: rgb(141, 214, 223); fill: rgb(141, 214, 223);"&gt;&lt;/circle&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  
  
  &lt;button id="btn"&gt;Click Me &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>