Jquery: Quên cấu trúc DOM, chỉ cần tìm phần tử tiếp theo với lớp này

Question

Tôi cảm thấy câu hỏi này đã được hỏi trước đây nhưng câu trả lời có vẻ khá cụ thể đối với mỗi người đăng.

Tôi đang tìm cách xác định phần tử đã cho và tìm phần tử tiếp theo có lớp cụ thể. Tôi không muốn phải đối phó với cha mẹ() hoặc trẻ em() kể từ khi tôi phân tích cú pháp thông qua một bảng và tôi không muốn nó dừng lại ở cuối của một hàng hoặc thậm chí là cuối bảng (chính nó) là hai cạnh nhau).

Có cách nào để chỉ tìm kiếm toàn bộ trang cho phiên bản tiếp theo của phần tử không?

BỐI CẢNH INFO: http://jsfiddle.net/HKkAa/2/

Tôi đang cố gắng để lặp qua bảng dưới bắt đầu từ các tế bào nổi bật và áp dụng các lớp học "nổi bật" để mỗi tế bào cho đến khi tôi đạt được ngày kết thúc. Tôi có một cách để tính toán khi tôi đã đến ngày kết thúc, tôi chỉ cần phương pháp ma thuật để chọn trường hợp tiếp theo của một liên kết.

Answer 1

Sửa

Đối với bất cứ ai quan tâm, tôi đã plugin-ified này ở đây: https://github.com/techfoobar/jquery-next-in-dom

---

Không có cách tích hợp để thực hiện việc này trong jQuery nếu bạn muốn nó hoàn toàn chung chung và có thể đáp ứng tất cả/bất kỳ cấu trúc DOM nào. Tôi đã từng làm một hàm đệ quy đơn giản thực hiện điều này. Nó đi như:

function nextInDOM(_selector, _subject) { 
    var next = getNext(_subject); 
    while(next.length != 0) { 
     var found = searchFor(_selector, next); 
     if(found != null) return found; 
     next = getNext(next); 
    } 
    return null; 
} 
function getNext(_subject) { 
    if(_subject.next().length > 0) return _subject.next(); 
    return getNext(_subject.parent()); 
} 
function searchFor(_selector, _subject) { 
    if(_subject.is(_selector)) return _subject; 
    else { 
     var found = null; 
     _subject.children().each(function() { 
      found = searchFor(_selector, $(this)); 
      if(found != null) return false; 
     }); 
     return found; 
    } 
    return null; // will/should never get here 
} 

Và bạn có thể gọi nó là thích:

nextInDOM('selector-to-match', element-to-start-searching-from-but-not-inclusive); 

Đối với ví dụ:

var nextInst = nextInDOM('.foo', $('#item')); 

sẽ giúp bạn có được là người đầu tiên phù hợp với .foo sau $('#item') không phụ thuộc vào cấu trúc DOM

Kiểm tra câu trả lời gốc tại đây: https://stackoverflow.com/a/11560428/921204

Answer 2

Tôi sẽ sử dụng một hàm đệ quy như thế này:

function findNext($element, selector) { 
    while ($element) { 
     var ne = $element.find(selector); 
     if (ne.length) return ne; 
     ne = $element.next(selector); 
     if (ne.length) return ne; 
     $element = $element.parent(); 
     if ($element.length==0) return null; 
     $element = $element.next(); 
     if ($element.is(selector)) return $element; 
    }  
} 

Nó tìm kiếm các yếu tố đầu tiên bên cạnh $ nguyên tố và đi lên một mức nếu cần thiết trước khi tiến và bổ nhào lại

Bạn có thể kiểm tra nó here (mở bảng điều khiển để xem phần tử "tiếp theo" có bộ chọn).

Answer 3

Giả sử bạn đang tìm kiếm lớp '.foo'. Nếu bạn muốn bạn có thể bọc nó trong một hàm để có thể tái sử dụng được.

var $yourelement; 
(...) 

var $allElements = $('.foo'); 
var $nextElement = $allElements[$.inArray($yourElement,$allElements)+1]; 

này sẽ trở lại $allElements[0] nếu $yourElement là người cuối cùng (làm cho nó một danh sách tròn)

Answer 4

Mã sau cho phép bạn tìm phần tử tiếp theo khớp với bộ chọn, bất kể cấu trúc DOM nào.

$.fn.nextThrough = function(selector) { 
    // Our reference will be the last element of the current set 
    var $reference = $(this).last(); 
    // Add the reference element to the set the elements that match the selector 
    var $set = $(selector).add($reference); 
    // Find the reference position to the set 
    var $pos = $set.index($reference); 
    // Return an empty set if it is the last one 
    if ($set.length == $pos) return $(); 
    // Return the next element to our reference 
    return $set.eq($pos + 1); 
} 

// Usage example 
$(':focus').nextThrough('input:visible').focus();