jQuery：当选择器相同时，使用：eq选择第二个元素

Question

I have the following code. There are two svg elements with same selectors , and i'm trying to select all the elements.

When i use selector [inner-text='" + innerText + "'][depth='" + depth + "'] I will be able to access the first element. When i try to access the second element using :eq(2) it gives an error Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '[inner-text='Exchanges data with'][depth='3']:eq(2)' is not a valid selector. How can i access all the elements ( say loop over all the elements in case the selectors are same )

 $( 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(); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg> <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"> <circle r="4.5"></circle> </g> <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"> <circle r="4.5" style="stroke: rgb(141, 214, 223); fill: rgb(141, 214, 223);"></circle> </g> </svg> <button id="btn">Click Me </button> 

Answer 1

You got the error because you tried to use a jQuery extension ( :eq ) in a d4.selectAll call. Since :eq is provided by jQuery, that won't work.

selectAll returns all matching elements, so

var points = d3.selectAll("[inner-text='" + innerText + "'][depth='" + depth + "']");
var point1 = jQuery(points[0][0]);
var point2 = jQuery(points[0][1]);
var transform1 = point1.attr('transform'); // No need for toString, it will always be a string
var transform2 = point2.attr('transform');

You can find out how many points there are from points.length ; individual points are accessible with indexes 0 through points.length - 1 .

Answer 2

You can use :nth-child instead of :eq , in this case.

Try below 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 + "']:nth-child(2)")[0]).attr('transform').toString(); alert(point2); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg> <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"> <circle r="4.5"></circle> </g> <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"> <circle r="4.5" style="stroke: rgb(141, 214, 223); fill: rgb(141, 214, 223);"></circle> </g> </svg> <button id="btn">Click Me</button>