2016-03-29 8 views
0

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

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>

答えて

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からありますどのように多くのポイントを見つけることができます。個々のポイントは、インデックス0points.length - 1でアクセスできます。

1

あなたは、この場合には、代わりに: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>

+0

':eq'と':n番目の-child'は**ない**、すべてで、等価です。 '.fooという:当量(2)'、 "クラス' foo'と第三の要素" を意味' .fooというに対し:n番目の子(3) '「3番目の子を意味し、**はクラス' foo'を有する場合"非常に、非常に異なるもの。 –

+0

@TJCrowder – Gilsha

+0

の情報をありがとう*「この場合は:eqの代わりにnth-childを使用できます」*すべての兄弟が 'inner-text'と' depth'フィルタと一致すると仮定した場合のみこれは、ユーザによって示される非常に小さなデータにおいては真実であるが、一般的なケースでは信頼できない。 ':nth-​​child'はこの仕事の間違ったツールです。 –

関連する問題