jquery - 選択を特定の div に制限する

Question

テーブルがあり、特定の行を見つけて最後に移動したい。私はこのコードでそれを行います:

var failLegend = $(".jqplot-table-legend tbody tr").filter(function() {
    return $(this).text() == "GA Fails";
}).closest("tr");

failLegend.insertAfter($(".jqplot-table-legend tbody tr:last"));

テーブルが1つしかない限り、それはうまく機能します。しかし、私はすべて同じクラスの複数のテーブルを持っており、すべてのテーブルからのすべての「GA Fails」行と最後のテーブルの終わり (各テーブルに 1 つではなく) になります。各テーブルは独自の div にあり、$chart 変数から div 名を取得できます。

$chart
[
<div id="chart_0" style="width: 95%; height: 450px; position: relative; " class="jqplot-target">…&lt;/div>

しかし、コードでそれを使用する方法がわからないため、行を見つけて移動すると、$chart の特定の div にのみ適用されます。

$chart の完全な値は次のとおりです。

$chart
[
<div id="chart_0" style="width: 95%; height: 450px; position: relative; " class="jqplot-target">
<canvas width="1300" height="450" style="position: absolute; left: 0px; top: 0px; " class="jqplot-base-canvas">
<div class="jqplot-title" style="height: 0px; width: 0px; ">&lt;/div>
<div class="jqplot-axis jqplot-xaxis" style="position: absolute; width: 1300px; height: 66px; left: 0px; bottom: 0px; ">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 22.5px; " class="jqplot-xaxis-tick">
<canvas width="15" height="66" style="text-align: left; position: absolute; left: 49.77777777777778px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 77.05555555555556px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 104.33333333333333px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 131.61111111111111px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 158.88888888888889px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 186.16666666666666px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 213.44444444444446px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 240.72222222222223px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 268px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 295.27777777777777px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 322.55555555555554px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 349.8333333333333px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 377.1111111111111px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 404.3888888888889px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 431.6666666666667px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 458.94444444444446px; " class="jqplot-xaxis-tick">
<canvas width="15" height="66" style="text-align: left; position: absolute; left: 486.22222222222223px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 513.5px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 540.7777777777778px; " class="jqplot-xaxis-tick">
<canvas width="15" height="66" style="text-align: left; position: absolute; left: 568.0555555555555px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 595.3333333333334px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 622.6111111111111px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 649.8888888888889px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 677.1666666666666px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 704.4444444444445px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 731.7222222222222px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 759px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 786.2777777777778px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 813.5555555555555px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 840.8333333333334px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 868.1111111111111px; " class="jqplot-xaxis-tick">
<canvas width="15" height="66" style="text-align: left; position: absolute; left: 895.3888888888889px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 922.6666666666666px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 949.9444444444445px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 977.2222222222222px; " class="jqplot-xaxis-tick">
<canvas width="15" height="4" style="text-align: left; position: absolute; left: 1004.5px; " class="jqplot-xaxis-tick">
</div>
<div class="jqplot-axis jqplot-yaxis" style="position: absolute; height: 450px; width: 19px; left: 0px; top: 0px; ">
<div class="jqplot-yaxis-tick" style="position: absolute; top: 366.5px; ">-0.3&lt;/div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 306px; ">-0.2&lt;/div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 245.5px; ">-0.1&lt;/div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 185px; ">-0.0&lt;/div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 124.5px; ">0.1&lt;/div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 64px; ">0.2&lt;/div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 3.5px; ">0.3&lt;/div>
</div>
<div class="jqplot-axis jqplot-y2axis" style="position: absolute; height: 450px; width: 11px; right: 257px; top: 0px; ">
<div class="jqplot-y2axis-tick" style="position: absolute; top: 366.5px; ">0&lt;/div>
<div class="jqplot-y2axis-tick" style="position: absolute; top: 330.2px; ">1&lt;/div>
<div class="jqplot-y2axis-tick" style="position: absolute; top: 293.9px; ">2&lt;/div>
<div class="jqplot-y2axis-tick" style="position: absolute; top: 257.6px; ">3&lt;/div>
<div class="jqplot-y2axis-tick" style="position: absolute; top: 221.3px; ">4&lt;/div>
<div class="jqplot-y2axis-tick" style="position: absolute; top: 185px; ">5&lt;/div>
<div class="jqplot-y2axis-tick" style="position: absolute; top: 148.7px; ">6&lt;/div>
<div class="jqplot-y2axis-tick" style="position: absolute; top: 112.4px; ">7&lt;/div>
<div class="jqplot-y2axis-tick" style="position: absolute; top: 76.10000000000002px; ">8&lt;/div>
<div class="jqplot-y2axis-tick" style="position: absolute; top: 39.80000000000001px; ">9&lt;/div>
<div class="jqplot-y2axis-tick" style="position: absolute; top: 3.5px; ">10&lt;/div>
</div>
<canvas width="1300" height="450" class="jqplot-grid-canvas" style="position: absolute; left: 0px; top: 0px; ">
<canvas width="982" height="363" style="position: absolute; left: 30px; top: 10px; " class="jqplot-series-shadowCanvas">
<canvas width="982" height="363" style="position: absolute; left: 30px; top: 10px; " class="jqplot-series-shadowCanvas">
<canvas width="982" height="363" style="position: absolute; left: 30px; top: 10px; " class="jqplot-series-shadowCanvas">
<canvas width="982" height="363" style="position: absolute; left: 30px; top: 10px; " class="jqplot-series-shadowCanvas">
<canvas width="982" height="363" style="position: absolute; left: 30px; top: 10px; " class="jqplot-series-canvas">
<canvas width="982" height="363" style="position: absolute; left: 30px; top: 10px; " class="jqplot-series-canvas">
<canvas width="982" height="363" style="position: absolute; left: 30px; top: 10px; " class="jqplot-series-canvas">
<canvas width="982" height="363" style="position: absolute; left: 30px; top: 10px; " class="jqplot-series-canvas">
<canvas width="982" height="363" style="position: absolute; left: 30px; top: 10px; " class="jqplot-highlight-canvas">
<div class="jqplot-highlighter-tooltip" style="position: absolute; display: none; ">&lt;/div>
<div class="jqplot-cursor-tooltip" style="position: absolute; display: none; ">&lt;/div>
<canvas width="982" height="363" style="position: absolute; left: 30px; top: 10px; " class="jqplot-zoom-canvas">
<canvas width="982" height="363" style="position: absolute; left: 30px; top: 10px; " class="jqplot-lineRenderer-highlight-canvas">
<canvas width="982" height="363" style="position: absolute; left: 30px; top: 10px; " class="jqplot-event-canvas">
<table class="jqplot-table-legend" style="position: absolute; margin-top: 0px; z-index: 3; right: 0px; top: 10px; ">
<tbody>
<tr class="jqplot-table-legend">
<td class="jqplot-table-legend jqplot-table-legend-swatch jqplot-seriesToggle" style="text-align: center; padding-top: 0px; ">
<div class="jqplot-table-legend-swatch-outline">
<div class="jqplot-table-legend-swatch" style="background-color: rgb(33, 56, 148); border-color: rgb(33, 56, 148); ">&lt;/div>
</div>
</td>
<td class="jqplot-table-legend jqplot-table-legend-label jqplot-seriesToggle" style="padding-top: 0px; ">NOVA_NAV_500_10pt_MCD_VL&lt;/td>
</tr>
<tr class="jqplot-table-legend">
<td class="jqplot-table-legend jqplot-table-legend-swatch jqplot-seriesToggle" style="text-align: center; padding-top: 0.5em; ">
<div class="jqplot-table-legend-swatch-outline">
<div class="jqplot-table-legend-swatch" style="background-color: rgb(0, 0, 0); border-color: rgb(0, 0, 0); ">&lt;/div>
</div>
</td>
<td class="jqplot-table-legend jqplot-table-legend-label jqplot-seriesToggle" style="padding-top: 0.5em; ">GA Fails&lt;/td>
</tr>
<tr class="jqplot-table-legend">
<td class="jqplot-table-legend jqplot-table-legend-swatch jqplot-seriesToggle" style="text-align: center; padding-top: 0.5em; ">
<div class="jqplot-table-legend-swatch-outline">
<div class="jqplot-table-legend-swatch" style="background-color: rgb(255, 154, 0); border-color: rgb(255, 154, 0); ">&lt;/div>
</div>
</td>
<td class="jqplot-table-legend jqplot-table-legend-label jqplot-seriesToggle" style="padding-top: 0.5em; ">NOVA_NAV_500_10pt_MCD_VL_FS_test&lt;/td>
</tr>
<tr class="jqplot-table-legend">
<td class="jqplot-table-legend jqplot-table-legend-swatch jqplot-seriesToggle" style="text-align: center; padding-top: 0.5em; ">
<div class="jqplot-table-legend-swatch-outline">
<div class="jqplot-table-legend-swatch" style="background-color: rgb(255, 0, 0); border-color: rgb(255, 0, 0); ">&lt;/div>
</div>
</td>
<td class="jqplot-table-legend jqplot-table-legend-label jqplot-seriesToggle" style="padding-top: 0.5em; ">NA Count&lt;/td>
</tr>
</tbody>
</table>
</div>
]

score 0 · Accepted Answer

このようなもの？

$(".jqplot-table-legend").each(function(){

    var rows = $(this).find("tbody  tr");
    var failLegend = rows.filter(function() {
      return $(this).text().trim() == "GA Fails";
    });

    failLegend.insertAfter(rows.last());
})

例: http://codepen.io/ByScripts/pen/BEfmg

score 0 · Accepted Answer

div を取得し、その子を取得してから、探している要素を見つけます。これでうまくいくはずです（未テスト）：

$('#$chart').children().find(".jqplot-table-legend tbody tr").filter(function() {
    return $(this).text() == "GA Fails";
}).closest("tr");

score 0 · Accepted Answer

コンテキストを設定してみてください:

var failLegend = $(".jqplot-table-legend tbody tr", $chart).filter(function() {
    return $(this).text() == "GA Fails";
}).closest("tr");

failLegend.insertAfter($("#chart_0 .jqplot-table-legend tbody tr:last"));

score 0 · Accepted Answer

uがur divでidとして使用しているchart_idを持っていると仮定します（chart_id =最初のdivの場合はchart_0、2番目のdivの場合はchart_1）

交換するだけ

var failLegend = $(".jqplot-table-legend tbody tr").filter(function() { return $(this).text() == "GA Fails"; }).closest("tr");

failLegend.insertAfter($(".jqplot-table-legend tbody tr:last"));

と

var failLegend = $("#" + chart_id + ".jqplot-table-legend tbody tr").filter(function() { return $(this).text() == "GA Fails"; }).closest( "tr");

failLegend.each(function() {
$(this).insertAfter($(this).parent().find("tr:last")) });

score 0 · Accepted Answer

http://forum.jquery.com/で完全に機能する回答を得ました。

var rows = $('.jqplot-table-legend tbody tr', $chart);
rows.filter(function() {
      return $(this).text() == 'GA Fails';
}).closest('tr').insertAfter(rows.last());

助けてくれてありがとう。

jquery - 選択を特定の div に制限する

5 に答える 5

Related

Reference