HTML: 4 个嵌套标签的倒序

Question

首先，我想我找到了一个interesting/similar用例，为了颠倒一些元素的顺序，here on S.O.

无论如何，我需要更改仅 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]

然后，我无法继续，因为我不知道如何 select 那些 3 嵌套标签 g 与 class "highcharts-legend-item" 以应用这样的东西（在另一个 post):

中找到

$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) --> (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是不正确的。 'g' 标签必须有结束标签。

<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 个嵌套标签的倒序

HTML: Reverse Order of 4 nested tags

html

jquery

nested

jquery-selectors