Trong javascript đơn giản (tức là không có phần mở rộng như jQuery, v.v.), có cách nào để xác định chỉ mục của nút con bên trong nút cha của nó mà không cần lặp lại và so sánh tất cả các nút con không?

Ví dụ,

var child = document.getElementById('my_element');
var parent = child.parentNode;
var childNodes = parent.childNodes;
var count = childNodes.length;
var child_index;
for (var i = 0; i < count; ++i) {
  if (child === childNodes[i]) {
    child_index = i;
    break;
  }
}

Có cách nào tốt hơn để xác định chỉ số của trẻ không?

bạn có thể sử dụng thuộc previousSiblingtính để lặp lại qua các anh chị em cho đến khi bạn quay lại nullvà đếm số anh chị em đã gặp:

var i = 0;
while( (child = child.previousSibling) != null ) 
  i++;
//at the end i will contain the index.

Xin lưu ý rằng trong các ngôn ngữ như Java, có một getPreviousSibling()hàm, tuy nhiên trong JS thì hàm này đã trở thành một thuộc tính - previousSibling.

Tôi đã trở nên thích sử dụng indexOfcho điều này. Bởi vì indexOflà bật Array.prototypevà parent.childrenlà một NodeList, bạn phải sử dụng call();Nó hơi xấu nhưng nó là một lớp lót và sử dụng các chức năng mà bất kỳ nhà phát triển javascript nào cũng phải quen thuộc.

var child = document.getElementById('my_element');
var parent = child.parentNode;
// The equivalent of parent.children.indexOf(child)
var index = Array.prototype.indexOf.call(parent.children, child);

ES6:

Array.from(element.parentNode.children).indexOf(element)

Giải trình :

• element.parentNode.children→ Trả về anh em của element, bao gồm cả phần tử đó.

• Array.from→ Truyền hàm tạo của childrenmột Arrayđối tượng

• indexOf→ Bạn có thể đăng ký indexOfvì bây giờ bạn đã có một Arrayđối tượng.

ES — Ngắn hơn

[...element.parentNode.children].indexOf(element);

Toán tử spread là một phím tắt cho điều đó

Thêm một element.getParentIndex () (tiền tố cho an toàn):

Element.prototype.PREFIXgetParentIndex = function() {
  return Array.prototype.indexOf.call(this.parentNode.children, this);
}

Tôi giả thuyết rằng cho một phần tử mà tất cả các phần tử con của nó được sắp xếp theo thứ tự trên tài liệu, thì cách nhanh nhất là thực hiện tìm kiếm nhị phân, so sánh vị trí tài liệu của các phần tử. Tuy nhiên, như đã giới thiệu trong phần kết luận, giả thuyết đã bị bác bỏ. Bạn càng có nhiều yếu tố, tiềm năng hiệu suất càng lớn. Ví dụ: nếu bạn có 256 phần tử, thì (tối ưu) bạn sẽ chỉ cần kiểm tra 16 phần tử trong số đó! Đối với 65536, chỉ 256! Hiệu suất tăng lên đến sức mạnh của 2! Xem thêm các con số / thống kê. Truy cập Wikipedia

(function(constructor){
   'use strict';
    Object.defineProperty(constructor.prototype, 'parentIndex', {
      get: function() {
        var searchParent = this.parentElement;
        if (!searchParent) return -1;
        var searchArray = searchParent.children,
            thisOffset = this.offsetTop,
            stop = searchArray.length,
            p = 0,
            delta = 0;

        while (searchArray[p] !== this) {
            if (searchArray[p] > this)
                stop = p + 1, p -= delta;
            delta = (stop - p) >>> 1;
            p += delta;
        }

        return p;
      }
    });
})(window.Element || Node);

Sau đó, cách bạn sử dụng nó là lấy thuộc tính 'parentIndex' của bất kỳ phần tử nào. Ví dụ, hãy xem bản demo sau.

(function(constructor){
   'use strict';
    Object.defineProperty(constructor.prototype, 'parentIndex', {
      get: function() {
        var searchParent = this.parentNode;
        if (searchParent === null) return -1;
        var childElements = searchParent.children,
            lo = -1, mi, hi = childElements.length;
        while (1 + lo !== hi) {
            mi = (hi + lo) >> 1;
            if (!(this.compareDocumentPosition(childElements[mi]) & 0x2)) {
                hi = mi;
                continue;
            }
            lo = mi;
        }
        return childElements[hi] === this ? hi : -1;
      }
    });
})(window.Element || Node);

output.textContent = document.body.parentIndex;
output2.textContent = document.documentElement.parentIndex;

Body parentIndex is <b id="output"></b><br />
documentElements parentIndex is <b id="output2"></b>

Hạn chế

• Việc triển khai giải pháp này sẽ không hoạt động trong IE8 trở xuống.

Tìm kiếm nhị phân VS tuyến tính Trên 200 nghìn phần tử (có thể làm hỏng một số trình duyệt di động, HÃY CẨN THẬN!):

• Trong thử nghiệm này, chúng ta sẽ xem một tìm kiếm tuyến tính mất bao lâu để tìm phần tử ở giữa VS một tìm kiếm nhị phân. Tại sao lại là phần tử ở giữa? Bởi vì nó nằm ở vị trí trung bình của tất cả các vị trí khác, vì vậy nó thể hiện tốt nhất tất cả các vị trí có thể có.

Tìm kiếm nhị phân

(function(constructor){
   'use strict';
    Object.defineProperty(constructor.prototype, 'parentIndexBinarySearch', {
      get: function() {
        var searchParent = this.parentNode;
        if (searchParent === null) return -1;
        var childElements = searchParent.children,
            lo = -1, mi, hi = childElements.length;
        while (1 + lo !== hi) {
            mi = (hi + lo) >> 1;
            if (!(this.compareDocumentPosition(childElements[mi]) & 0x2)) {
                hi = mi;
                continue;
            }
            lo = mi;
        }
        return childElements[hi] === this ? hi : -1;
      }
    });
})(window.Element || Node);
test.innerHTML = '<div> </div> '.repeat(200e+3);
// give it some time to think:
requestAnimationFrame(function(){
  var child=test.children.item(99.9e+3);
  var start=performance.now(), end=Math.round(Math.random());
  for (var i=200 + end; i-- !== end; )
    console.assert( test.children.item(
        Math.round(99.9e+3+i+Math.random())).parentIndexBinarySearch );
  var end=performance.now();
  setTimeout(function(){
    output.textContent = 'It took the binary search ' + ((end-start)*10).toFixed(2) + 'ms to find the 999 thousandth to 101 thousandth children in an element with 200 thousand children.';
    test.remove();
    test = null; // free up reference
  }, 125);
}, 125);

<output id=output> </output><br />
<div id=test style=visibility:hidden;white-space:pre></div>

Backwards (`lastIndexOf`) Tìm kiếm tuyến tính

(function(t){"use strict";var e=Array.prototype.lastIndexOf;Object.defineProperty(t.prototype,"parentIndexLinearSearch",{get:function(){return e.call(t,this)}})})(window.Element||Node);
test.innerHTML = '<div> </div> '.repeat(200e+3);
// give it some time to think:
requestAnimationFrame(function(){
  var child=test.children.item(99e+3);
  var start=performance.now(), end=Math.round(Math.random());
  for (var i=2000 + end; i-- !== end; )
    console.assert( test.children.item(
        Math.round(99e+3+i+Math.random())).parentIndexLinearSearch );
  var end=performance.now();
  setTimeout(function(){
    output.textContent = 'It took the backwards linear search ' + (end-start).toFixed(2) + 'ms to find the 999 thousandth to 101 thousandth children in an element with 200 thousand children.';
    test.remove();
    test = null; // free up reference
  }, 125);
});

<output id=output> </output><br />
<div id=test style=visibility:hidden;white-space:pre></div>

Chuyển tiếp (`indexOf`) Tìm kiếm tuyến tính

(function(t){"use strict";var e=Array.prototype.indexOf;Object.defineProperty(t.prototype,"parentIndexLinearSearch",{get:function(){return e.call(t,this)}})})(window.Element||Node);
test.innerHTML = '<div> </div> '.repeat(200e+3);
// give it some time to think:
requestAnimationFrame(function(){
  var child=test.children.item(99e+3);
  var start=performance.now(), end=Math.round(Math.random());
  for (var i=2000 + end; i-- !== end; )
    console.assert( test.children.item(
        Math.round(99e+3+i+Math.random())).parentIndexLinearSearch );
  var end=performance.now();
  setTimeout(function(){
    output.textContent = 'It took the forwards linear search ' + (end-start).toFixed(2) + 'ms to find the 999 thousandth to 101 thousandth children in an element with 200 thousand children.';
    test.remove();
    test = null; // free up reference
  }, 125);
});

<output id=output> </output><br />
<div id=test style=visibility:hidden;white-space:pre></div>

TrướcElementSibling Counter Search

Đếm số PreviousElementSiblings để có được parentIndex.

(function(constructor){
   'use strict';
    Object.defineProperty(constructor.prototype, 'parentIndexSiblingSearch', {
      get: function() {
        var i = 0, cur = this;
        do {
            cur = cur.previousElementSibling;
            ++i;
        } while (cur !== null)
        return i; //Returns 3
      }
    });
})(window.Element || Node);
test.innerHTML = '<div> </div> '.repeat(200e+3);
// give it some time to think:
requestAnimationFrame(function(){
  var child=test.children.item(99.95e+3);
  var start=performance.now(), end=Math.round(Math.random());
  for (var i=100 + end; i-- !== end; )
    console.assert( test.children.item(
        Math.round(99.95e+3+i+Math.random())).parentIndexSiblingSearch );
  var end=performance.now();
  setTimeout(function(){
    output.textContent = 'It took the PreviousElementSibling search ' + ((end-start)*20).toFixed(2) + 'ms to find the 999 thousandth to 101 thousandth children in an element with 200 thousand children.';
    test.remove();
    test = null; // free up reference
  }, 125);
});

<output id=output> </output><br />
<div id=test style=visibility:hidden;white-space:pre></div>

Không tìm kiếm

Để đo điểm chuẩn, kết quả của bài kiểm tra sẽ như thế nào nếu trình duyệt tối ưu hóa tìm kiếm.

test.innerHTML = '<div> </div> '.repeat(200e+3);
// give it some time to think:
requestAnimationFrame(function(){
  var start=performance.now(), end=Math.round(Math.random());
  for (var i=2000 + end; i-- !== end; )
    console.assert( true );
  var end=performance.now();
  setTimeout(function(){
    output.textContent = 'It took the no search ' + (end-start).toFixed(2) + 'ms to find the 999 thousandth to 101 thousandth children in an element with 200 thousand children.';
    test.remove();
    test = null; // free up reference
  }, 125);
});

<output id=output> </output><br />
<div id=test style=visibility:hidden></div>

Cuộc thảo luận

Tuy nhiên, sau khi xem kết quả trên Chrome, kết quả lại trái ngược với những gì mong đợi. Tìm kiếm tuyến tính chuyển tiếp dumber là 187 ms đáng ngạc nhiên, 3850%, nhanh hơn so với tìm kiếm nhị phân. Rõ ràng là bằng cách nào đó, Chrome đã vượt trội một cách kỳ diệu console.assertvà tối ưu hóa nó, hoặc (lạc quan hơn) Chrome sử dụng nội bộ hệ thống lập chỉ mục số cho DOM và hệ thống lập chỉ mục nội bộ này được hiển thị thông qua các tối ưu hóa được áp dụng Array.prototype.indexOfkhi được sử dụng trên một HTMLCollectionđối tượng.

Sử dụng thuật toán tìm kiếm nhị phân để cải thiện hiệu suất khi nút có số lượng lớn anh chị em.

function getChildrenIndex(ele){
    //IE use Element.sourceIndex
    if(ele.sourceIndex){
        var eles = ele.parentNode.children;
        var low = 0, high = eles.length-1, mid = 0;
        var esi = ele.sourceIndex, nsi;
        //use binary search algorithm
        while (low <= high) {
            mid = (low + high) >> 1;
            nsi = eles[mid].sourceIndex;
            if (nsi > esi) {
                high = mid - 1;
            } else if (nsi < esi) {
                low = mid + 1;
            } else {
                return mid;
            }
        }
    }
    //other browsers
    var i=0;
    while(ele = ele.previousElementSibling){
        i++;
    }
    return i;
}

Tôi gặp sự cố với các nút văn bản và nó đang hiển thị chỉ mục sai. Đây là phiên bản để sửa chữa nó.

function getChildNodeIndex(elem)
{   
    let position = 0;
    while ((elem = elem.previousSibling) != null)
    {
        if(elem.nodeType != Node.TEXT_NODE)
            position++;
    }

    return position;
}

Object.defineProperties(Element.prototype,{
group : {
    value: function (str, context) {
        // str is valid css selector like :not([attr_name]) or .class_name
        var t = "to_select_siblings___";
        var parent = context ? context : this.parentNode;
        parent.setAttribute(t, '');
        var rez = document.querySelectorAll("[" + t + "] " + (context ? '' : ">") + this.nodeName + (str || "")).toArray();
        parent.removeAttribute(t);            
        return rez;  
    }
},
siblings: {
    value: function (str, context) {
        var rez=this.group(str,context);
        rez.splice(rez.indexOf(this), 1);
        return rez; 
    }
},
nth: {  
    value: function(str,context){
       return this.group(str,context).indexOf(this);
    }
}
}

Ví dụ

/* html */
<ul id="the_ul">   <li></li> ....<li><li>....<li></li>   </ul>

 /*js*/
 the_ul.addEventListener("click",
    function(ev){
       var foo=ev.target;
       foo.setAttribute("active",true);
       foo.siblings().map(function(elm){elm.removeAttribute("active")});
       alert("a click on li" + foo.nth());
     });

Bạn có thể làm điều gì đó như thế này:

var index = Array.prototype.slice.call(element.parentElement.children).indexOf(element);

https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement

<body>
    <section>
        <section onclick="childIndex(this)">child a</section>
        <section onclick="childIndex(this)">child b</section>
        <section onclick="childIndex(this)">child c</section>
    </section>
    <script>
        function childIndex(e){
            let i = 0;
            while (e.parentNode.children[i] != e) i++;
            alert('child index '+i);
        }
    </script>
</body>