uzyskać następnego elementu z określonej klasy po określonym elemencie

Question

Mam znaczników HTML tak:

<p> 
    <label>Arrive</label> 
    <input id="from-date1" class="from-date calender" type="text" /> 
</p> 

<p> 
    <label>Depart</label> 
    <input id="to-date1" class="to-date calender" type="text" /> 
</p> 

<p> 
    <label>Arrive</label> 
    <input id="from-date2" class="from-date calender" type="text" /> 
</p> 

<p> 
    <label>Depart</label> 
    <input id="to-date2" class="to-date calender" type="text" /> 
</p> 

Chcę po dostać następny element z dat, aby uzyskać odpowiedni do tej pory. (Układ jest trochę bardziej złożony, ale od daty ma już aktualną klasę i do tej pory ma aktualną klasę).

To próbuję zrobić, chcę wziąć element z datą i znaleźć następny element w domie z aktualną klasą. Próbowałem tego:

$('#from-date1').next('.to-date') 

ale daje mi pusty element jQuery. Myślę, że to dlatego, że next daje następne rodzeństwo pasujące do selektora. Jak mogę uzyskać odpowiedni to-date?

Answer 1

Nie można znaleźć bezpośredniego sposobu na zrobienie tego, więc napisałem mały algorytm rekurencyjny.

Demo:http://jsfiddle.net/sHGDP/

nextInDOM() funkcja przyjmuje 2 argumenty, mianowicie element zacząć szukać od i selektor dopasować.

zamiast

$('#from-date1').next('.to-date') 

można użyć:

nextInDOM('.to-date', $('#from-date1')) 

Kod

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 
} 

Answer 2

.next('.to-date') nic nie wróci, bo masz dodatkową p pomiędzy

Trzeba .parent().next().find('.to-date').

Być może będziesz musiał to poprawić, jeśli domena jest bardziej skomplikowana niż Twój przykład. Ale w zasadzie sprowadza się to do czegoś takiego:

$(".from-date").each(function(){ 
    // for each "from-date" input 
    console.log($(this)); 
    // find the according "to-date" input 
    console.log($(this).parent().next().find(".to-date")); 
}); 

edytuj: To o wiele lepiej i szybciej po prostu szukać ID. Poniższy kod przeszukuje wszystkie z-dat i dostaje według-terminach:

function getDeparture(el){ 
    var toId = "#to-date"+el.attr("id").replace("from-date",""); 
    //do something with the value here 
    console.log($(toId).val()); 
} 

var id = "#from-date", 
    i = 0; 

while($(id+(++i)).length){ 
    getDeparture($(id+i)); 
} 

Spójrz na example.

Answer 3

spróbować

var flag = false; 
var requiredElement = null; 
$.each($("*"),function(i,obj){ 
    if(!flag){ 
     if($(obj).attr("id")=="from-date1"){ 
      flag = true; 
     } 
    } 
    else{ 
     if($(obj).hasClass("to-date")){ 
      requiredElement = obj; 
      return false; 
     } 
    } 
}); 

Answer 4

var item_html = document.getElementById('from-date1'); 
    var str_number = item_html.attributes.getNamedItem("id").value; 
    // Get id's value. 
    var data_number = showIntFromString(str_number); 


    // Get to-date this class 
    // Select by JQ. $('.to-date'+data_number) 
    console.log('to-date'+data_number); 

    function showIntFromString(text){ 
     var num_g = text.match(/\d+/); 
     if(num_g != null){ 
      console.log("Your number:"+num_g[0]); 
      var num = num_g[0]; 
      return num; 
     }else{ 
      return; 
     } 
    } 

Użyj JS. aby uzyskać klucz od twojego id. Analizuj to, niż wyprowadź liczbę. Użyj JQ. selektor łączyć ciąg z chcesz niż + ten numer. Mam nadzieję, że to może ci pomóc.