jQuery:选择器相同时使用:eq选择第二个元素

Question

我有下面的代码。有两个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>

​

Answer 1

您得到了错误，因为您试图在一个jQuery调用中使用一个d4.selectAll扩展(:eq)。因为: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访问各个点。

Answer 2

在本例中，您可以使用:nth-child而不是:eq。

试试下面的代码。

​

$(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>

​