限制选择特定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">​…​</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;​ ">​</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​</div>​
<div class=​"jqplot-yaxis-tick" style=​"position:​ absolute;​ top:​ 306px;​ ">​-0.2​</div>​
<div class=​"jqplot-yaxis-tick" style=​"position:​ absolute;​ top:​ 245.5px;​ ">​-0.1​</div>​
<div class=​"jqplot-yaxis-tick" style=​"position:​ absolute;​ top:​ 185px;​ ">​-0.0​</div>​
<div class=​"jqplot-yaxis-tick" style=​"position:​ absolute;​ top:​ 124.5px;​ ">​0.1​</div>​
<div class=​"jqplot-yaxis-tick" style=​"position:​ absolute;​ top:​ 64px;​ ">​0.2​</div>​
<div class=​"jqplot-yaxis-tick" style=​"position:​ absolute;​ top:​ 3.5px;​ ">​0.3​</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​</div>​
<div class=​"jqplot-y2axis-tick" style=​"position:​ absolute;​ top:​ 330.2px;​ ">​1​</div>​
<div class=​"jqplot-y2axis-tick" style=​"position:​ absolute;​ top:​ 293.9px;​ ">​2​</div>​
<div class=​"jqplot-y2axis-tick" style=​"position:​ absolute;​ top:​ 257.6px;​ ">​3​</div>​
<div class=​"jqplot-y2axis-tick" style=​"position:​ absolute;​ top:​ 221.3px;​ ">​4​</div>​
<div class=​"jqplot-y2axis-tick" style=​"position:​ absolute;​ top:​ 185px;​ ">​5​</div>​
<div class=​"jqplot-y2axis-tick" style=​"position:​ absolute;​ top:​ 148.7px;​ ">​6​</div>​
<div class=​"jqplot-y2axis-tick" style=​"position:​ absolute;​ top:​ 112.4px;​ ">​7​</div>​
<div class=​"jqplot-y2axis-tick" style=​"position:​ absolute;​ top:​ 76.10000000000002px;​ ">​8​</div>​
<div class=​"jqplot-y2axis-tick" style=​"position:​ absolute;​ top:​ 39.80000000000001px;​ ">​9​</div>​
<div class=​"jqplot-y2axis-tick" style=​"position:​ absolute;​ top:​ 3.5px;​ ">​10​</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;​ ">​</div>​
<div class=​"jqplot-cursor-tooltip" style=​"position:​ absolute;​ display:​ none;​ ">​</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)​;​ ">​</div>​
</div>​
</td>​
<td class=​"jqplot-table-legend jqplot-table-legend-label jqplot-seriesToggle" style=​"padding-top:​ 0px;​ ">​NOVA_NAV_500_10pt_MCD_VL​</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)​;​ ">​</div>​
</div>​
</td>​
<td class=​"jqplot-table-legend jqplot-table-legend-label jqplot-seriesToggle" style=​"padding-top:​ 0.5em;​ ">​GA Fails​</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)​;​ ">​</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​</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)​;​ ">​</div>​
</div>​
</td>​
<td class=​"jqplot-table-legend jqplot-table-legend-label jqplot-seriesToggle" style=​"padding-top:​ 0.5em;​ ">​NA Count​</td>​
</tr>​
</tbody>​
</table>​
</div>​
]

Answer 1

得到div，然后得到它的孩子，然后找到你要找的元素。这应该做（未经测试）：

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

Answer 2

尝试设置上下文：

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

Answer 3

这样的东西？

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

Answer 4

假设你将你在div中使用的chart_id作为id（第一个div为chart_id = chart_0，第二个div为chart_1）

只需替换

  

var failLegend = $（“。jqplot-table-legend tbody tr”）。filter（function（）   {       return $（this）.text（）==“GA Fails”; }）最接近的（ “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”; }）最接近的（ “TR”）;

     

failLegend.each（function（）{
         $（this）.insertAfter（$（this）.parent（）。find（“tr：last”））}）;

Answer 5

我在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());

感谢大家尝试提供帮助。