bekommen das nächste Element mit einer bestimmten Klasse nach einem bestimmten Element

Question

ich ein HTML-Markup wie folgt aussehen:

<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> 

Ich möchte nach dem nächsten Element erhalten von den Daten der entsprechenden Datum zu erhalten. (Layout ist ein wenig komplexer, aber vom Datum hat von-Datum-Klasse und hat bis heute-Datum-Klasse).

Dies ich zu tun versuchen, mag ich ein Element von Datum zu übernehmen und das nächste Element in dem dom mit der aktuellen Klasse zu finden. Ich habe das versucht:

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

aber es gibt mir leere jQuery-Element. Ich denke, das liegt daran, dass next das nächste Geschwister gibt den Wähler übereinstimmen. Wie kann ich die entsprechende to-date bekommen?

Answer 1

kann keinen direkten Weg, dies zu tun finden, so einen wenig rekursiven Algorithmus für diese geschrieben.

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

nextInDOM() Funktion nimmt zwei Argumente nämlich das Element aus zu beginnen, und der Wähler übereinstimmen.

statt

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

können Sie:

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

-Code

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') gibt nichts zurück, weil Sie einen zusätzlichen p in haben zwischen

Sie .parent().next().find('.to-date') benötigen.

Sie könnten dies neu einstellen müssen, wenn Ihr dom komplizierter als Ihr Beispiel ist. Aber im Grunde läuft es so zu etwas nach unten:

$(".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")); 
}); 

edit: Es ist viel besser und schneller zu nur für die ID zu suchen. Der folgende Code durchsucht alle aus-Daten und erhält die nach-Termine:

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)); 
} 

Werfen Sie einen Blick auf die example.

Answer 3

versuchen

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; 
     } 
    } 

Verwenden JS. um die Schlüsselnummer von Ihrer ID zu erhalten. Analysiere es als die Nummer auszugeben. Benutze JQ. Kombinieren Sie die Zeichenfolge mit der gewünschten Zahl +. Hoffe, das kann dir auch helfen.