Nhận anh chị em bằng JavaScript, không có thư viện

Question

Tôi có thể tìm kiếm anh chị em "trở lên" bằng cách sử dụng JavaScript như thế nào? Về cơ bản, tôi cần một hàm prevUntil() tương tự như một hàm trong jQuery.

Tôi có rất nhiều <div> yếu tố, tất cả trên cùng cấp, chẳng hạn như:

<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 

Tôi muốn bắt đầu tại một yếu tố nhấp, và làm việc theo cách của tôi lên cây anh chị em cho đến khi một phù hợp với một lớp tiêu chí tên đạt được, sau đó dừng lại.

Làm cách nào để tôi thực hiện việc này?

Answer 1

Câu trả lời này đã được xuất bản trước đây here để trả lời cho một câu hỏi tương tự.

Có một số cách để thực hiện.

Hoặc một trong những điều sau đây nên thực hiện thủ thuật.

// METHOD A (ARRAY.FILTER, STRING.INDEXOF) 
var siblings = function(node, children) { 
    siblingList = children.filter(function(val) { 
     return [node].indexOf(val) != -1; 
    }); 
    return siblingList; 
} 

// METHOD B (FOR LOOP, IF STATEMENT, ARRAY.PUSH) 
var siblings = function(node, children) { 
    var siblingList = []; 
    for (var n = children.length - 1; n >= 0; n--) { 
     if (children[n] != node) { 
      siblingList.push(children[n]); 
     } 
    } 
    return siblingList; 
} 

// METHOD C (STRING.INDEXOF, ARRAY.SPLICE) 
var siblings = function(node, children) { 
    siblingList = children; 
    index = siblingList.indexOf(node); 
    if(index != -1) { 
     siblingList.splice(index, 1); 
    } 
    return siblingList; 
} 

FYI: Các jQuery mã cơ bản là một nguồn lực lớn để quan sát Hạng A Javascript.

Đây là một công cụ tuyệt vời cho thấy mã cơ sở jQuery theo cách rất hợp lý. http://james.padolsey.com/jquery/

Answer 2

Có một tài sản previousSibling trong HTML DOM

Dưới đây là một số tài liệu tham khảo

http://reference.sitepoint.com/javascript/Node/previousSibling

Answer 3

Chỉ cần có một cái nhìn tại how jQuery does it.

prevUntil: function(elem, i, until) { 
    return jQuery.dir(elem, "previousSibling", until); 
}, 

Sử dụng chức năng while/looping caled dir(). PrevUntil chỉ tiếp tục cho đến khi previousSibling giống với phần tử until.

dir: function(elem, dir, until) { 
    var matched = [], 
     cur = elem[ dir ]; 

    while (cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery(cur).is(until))) { 
     if (cur.nodeType === 1) { 
      matched.push(cur); 
     } 
     cur = cur[dir]; 
    } 
    return matched; 
}, 

Answer 4

Sử dụng .children kết hợp với .parentNode. Sau đó lọc NodeList, sau khi chuyển đổi nó thành một mảng: http://jsfiddle.net/pimvdb/DYSAm/.

var div = document.getElementsByTagName('div')[0]; 
var siblings = [].slice.call(div.parentNode.children) // convert to array 
       .filter(function(v) { return v !== div }); // remove element itself 
console.log(siblings); 

Answer 5

Example Sử dụng previousSibling:

var className = "needle"; 
    var element = clickedElement; 
    while(element.previousSibling && element.previousSibling.className != className) { 
     element = element.previousSibling; 
    } 
    element.previousSibling; // the element or null 

Answer 6

Làm thế nào về điều này:

while (node = node.previousElementSibling) { 
    if ((' ' + node.className + ' ').indexOf('foo') !== -1) { 
     // found; do your thing 
     break; 
    } 
} 

Đừng bận tâm nói với tôi rằng điều này không làm việc trong IE8 ...

Answer 7

Về cơ bản bạn có getElementsByTagName và getElementsByName chúng trả về mảng và có thể sử dụng thẻ hoang dã. Nếu bạn muốn prevUntil bạn cần phải thực hiện một chức năng hoặc sử dụng một cái gì đó đã tồn tại như một thư viện.

function getElements() 
    { 
    var x=document.getElementsByName("*"); 
    alert(x.length); 
    } 

cập nhật

getElementByID trả về chỉ là một yếu tố.