Question

我发布了一个问题（How to order list items by simple hierarchy in page）;答案回答了这个问题，但仅仅是因为我的样本不够复杂。

我需要找到元素的索引与非常高的父级或整个页面的比较。可以作为与整个dom相比的指数。

那里的代码不起作用，因为index（）总是返回0（如果控件不在同一个父级中） https://jsfiddle.net/6ztqckqa/3/

$(function() {
  //reorder errorList,
  $('#errorList a').sort(function(a, b) {
    var data1 = $(a).data('idcontrol'),
      data2 = $(b).data('idcontrol'),
      index1 = $('#' + data1).index(),
      index2 = $('#' + data2).index();

    return index1 - index2;
  }).appendTo('#errorList');
});

HTML：

<h3>The original list or errors.</h3>
<div id="errorListOriginal">
    <a data-idcontrol="textbox2">error textbox2</a>
    <a data-idcontrol="list3">error list3</a>
    <a data-idcontrol="textbox1">error textbox1</a>
    <a data-idcontrol="textbox2">error textbox2</a>
    <a data-idcontrol="list1">error list1</a>
</div>
<h3>The list or errors reordered.</h3>
<div id="errorList">
    <a data-idcontrol="textbox2">error textbox2</a>
    <a data-idcontrol="list3">error list3</a>
    <a data-idcontrol="textbox1">error textbox1</a>
    <a data-idcontrol="textbox2">error textbox2</a>
    <a data-idcontrol="list1">error list1</a>
</div>

<h3>What should be the list of errors after been reordered.</h3>
<div id="errorListShouldBeAfterReorderOnLoad">
    <a data-idcontrol="textbox1">error textbox1</a>
    <a data-idcontrol="textbox2">error textbox2</a>
    <a data-idcontrol="textbox2">error textbox2</a>
    <a data-idcontrol="list1">error list1</a>
    <a data-idcontrol="list3">error list3</a>
</div>

<h3>Elements in the page</h3>
<div>
    <div>
        <input type="text" id="textbox1" />
    </div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <input type="text" id="textbox2" />
                    </div>
                </div>
            </div>
            <div>
                <select id="list1">
                    <option>item1</option>
                </select>
            </div>
        </div>
    </div>
    <div>
        <div>
            <div>
                <input type="text" id="textbox3" />
            </div>
            <select id="list2">
                <option>item1</option>
            </select>
        </div>
    </div>
    <div>
        <select id="list3">
            <option>item1</option>
        </select>
    </div>
</div>

有没有办法使用z-index？

Answer 1

至少有一些嵌套的div应该有一些类来表明它们的用途。同一类的元素应该在DOM树中处于同一级别，以便您可以选择它们并获取它们的索引。

否则，将类或ID应用于顶级父级并定位其子级。

底线是干净的语义标记是关键。

Answer 2

我在Is element before or after another element in DOM

上使用了暴力基础

这里是小提琴http://jsfiddle.net/6ztqckqa/5

$(function() {
  //reorder errorList,
  $('#errorList a').sort(function(a, b) {
    var data1 = $(a).data('idcontrol'),
      data2 = $(b).data('idcontrol');

            var all = $('input, select');

            var index1 = all.index($("#" + data1));
            var index2 = all.index($("#" + data2));

    return index1 - index2;
  }).appendTo('#errorList');
});

如何按页面中的复杂层次排序

2 个答案: