我有以下代码。有两个具有相同选择器的svg元素，我正在尝试选择所有元素。
当我使用选择器时，[inner-text='" + innerText + "'][depth='" + depth + "']我将能够访问第一个元素。当我尝试使用第二个元素访问时:eq(2)出现错误，Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '[inner-text='Exchanges data with'][depth='3']:eq(2)' is not a valid selector.我如何访问所有元素（例如，在选择器相同的情况下遍历所有元素）
$( 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>您收到错误消息是因为您尝试:eq在d4.selectAll通话中使用jQuery扩展名（）。由于:eq是jQuery提供的，因此无法正常工作。
selectAll 返回所有匹配的元素，所以
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');
您可以从中找出多少点points.length；各个点与索引访问0过points.length - 1。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句