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"));

只要我只有一张桌子，它就可以正常工作。但是我有多个表都具有相同的类，我最终得到所有表中的所有“GA Fails”行和最后一个表的末尾（而不是每个表上的一个）。每个表都在自己的 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

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

像这样的东西？

$(".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_id作为id（chart_id = chart_0 for first div and chart_1 for second div）

只需更换

var failLegend = $(".jqplot-table-legend tbody tr").filter(function() { return $(this).text() == "GA 失败"; }).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