jQueryのは：セレクタが使用して同一の第二の要素を選択すると：私は、次のコードを持っている

Question

を式同じセレクタを持つ2つのsvg要素があり、すべての要素を選択しようとしています。 iはセレクタ[inner-text='" + innerText + "'][depth='" + depth + "']を使用する場合

Iは最初の要素にアクセスすることができるであろう。私はそれは私が（と言う場合は、すべての要素をループセレクタが同じである）すべての要素にアクセスするにはどうすればよいのエラー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

あなたを与える:eq(2)を使用して第2の要素にアクセスしようとすると、 d4.selectAll呼び出しでjQuery拡張機能（: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

あなたは、この場合には、代わりに:eqの:nth-childを使用することができます。

はコードの下に試してみてください。

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