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.如何访问所有元素（例如，如果选择器相同，则循环遍历所有元素）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您收到错误是因为您尝试在class CTL_Resource extends Model { // set the table name since it is not ctl_resources protected $table = "CTL_Resource"; // set the primary key field since it is not id protected $primaryKey = "idResource"; // primary key is not an auto-incrementing int public $incrementing = false; // no created_at, updated_at fields on this table public $timestamps = false; // don't snake case the relationship names on json/array conversion public static $snakeAttributes = false; // code ... }调用中使用jQuery扩展名（:eq）。由于d4.selectAll由jQuery提供，因此无法正常工作。

selectAll返回所有匹配的元素，所以

:eq

您可以从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可以访问各个点。

Answer 2

在这种情况下，您可以使用:nth-child代替:eq。

尝试以下代码。

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery：选择器使用时选择第二个元素：eq

2 个答案: