Question

首先，我认为我找到了一个有趣/类似的用例，以便颠倒某些元素的顺序，here on S.O.

无论如何，我需要更改JUST 4嵌套标签<g>的顺序，第一个标签g的大孩子有：

<g class="highcharts-legend" zIndex="7" transform="translate(565,0)">

这是原始代码：

<!-- CHANGE this tag g with trasnform="translate(565,0)"  -->
<g class="highcharts-legend" zIndex="7" transform="translate(565,0)">
  <g zIndex="1">
    <g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(10,3)"></g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(20,3)"></g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(30,3)"></g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(40,3)"></g>
    </g>
  </g>
</g>
<!-- DON'T CHANGE this tag g with trasnform="translate(580,0)"  -->
<g class="highcharts-legend" zIndex="7" transform="translate(580,0)">
  <g zIndex="1">
    <g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(1,3)"></g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(2,3)"></g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(3,3)"></g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(4,3)"></g>
    </g>
  </g>
</g>

这应该成为：

<!-- CHANGE this tag g with trasnform="translate(565,0)"  -->
<g class="highcharts-legend" zIndex="7" transform="translate(565,0)">
  <g zIndex="1">
    <g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(40,3)"></g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(30,3)"></g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(20,3)"></g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(10,3)"></g>
    </g>
  </g>
</g>
<!-- DON'T CHANGE this tag g with trasnform="translate(580,0)"  -->
<g class="highcharts-legend" zIndex="7" transform="translate(580,0)">
  <g zIndex="1">
    <g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(1,3)"></g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(2,3)"></g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(3,3)"></g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(4,3)"></g>
    </g>
  </g>
</g>

由于我有许多与此类似的元素，但这是第一个，为了识别我想要修改的父节点，我提出了：

$('.highcharts-legend')[0]

然后，我不能继续，因为我不知道如何选择那些带有“highcharts-legend-item”类的3嵌套标签g，以便应用这样的东西（在另一篇文章中找到）： / p>

$top = $('div#thatTopDiv');
$top.children('div').slice(1).each(function() {
    $(this).insertBefore($top.children().eq(0));
});

任何帮助都会很高兴（因为jQuery最近不是我最好的技能）

修改：

1）我更新了原始HTML源代码，以便拥有2个相似的父代码;第一个是要修改的，另一个没有任何变化）

2）嵌套标签g已变为4（不是3）只是澄清订单应如何逆转：（10,20,30,40） - ＆gt; （40,30,20,10）

Answer 1

你可以这样做，

//you can write below code inside function and call it when require.

var element = $('.highcharts-legend').find(".highcharts-legend-item:last") 
$(element).insertBefore($('.highcharts-legend').find(".highcharts-legend-item:first"))

Answer 2

首先你的html不正确。＆＃39;克＆＃39;标签必须有结束标记。

<g class="highcharts-legend" zindex="7" transform="translate(565,0)">
    <g zindex="1">
        <g>
            <g class="highcharts-legend-item" zindex="1" transform="translate(8,3)"></g>
            <g class="highcharts-legend-item" zindex="1" transform="translate(82,3)"></g>
            <g class="highcharts-legend-item" zindex="1" transform="translate(159,3)"></g>
        </g>
    </g>
</g>

jQuery代码反转元素

var $parent = $('.highcharts-legend>g>g');
var $children = $parent.children();
$parent.append($children.get().reverse());

HTML：4个嵌套标签的反向顺序

2 个答案: