Holen Sie sich das nächste element mit einer bestimmten Klasse, die nach einem bestimmten element

Ich habe ein HTML-markup wie dieses:

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

Möchte ich, um das nächste element nach von Terminen, um das entsprechende bis-Datum. (Layout ist ein wenig komplexer, aber vom Termin ab-Termin-Klasse und Termin-date-Klasse).

Ist dies versuche ich zu tun, möchte ich aus dem Datum-element und finden Sie das nächste element im dom mit to-date-Klasse. Ich versuchte dies:

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

aber es ist mir leer jQuery element. Ich denke, das ist, weil next liefert den nächsten Geschwisterknoten passenden Selektor. Wie bekomme ich die entsprechenden to-date?

InformationsquelleAutor rubyprince | 2012-07-19

  1. 8

    Konnte nicht finden einen direkten Weg, dies zu tun, so schrieb ein wenig rekursiven Algorithmus.

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

    nextInDOM() Funktion nimmt 2 Argumente, nämlich das element zu Beginn der Suche aus und der Selektor übereinstimmen.

    statt

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

    können Sie verwenden:

    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
}
    Ich versuchte dies und es gab mir das nächste element. Haben Sie dieses in einer netten, kleinen Funktion. Vielen Dank.
    Froh, dass es funktionierte. 🙂 Es war ein wirklich cooles problem zu lösen, in der Tat ich denke, so etwas wie nextInDOM() wird nützlich sein, in eine Menge von Orten.
    Ja, ich habe es in meine Website, um die Standard-Kalender werden die Termine für das Datum, eine person auswählt, die für die ab-Datum. Vielen Dank und ich werde auf jeden Fall werden mit dieser Funktion für meine zukünftigen Projekte auch.

    InformationsquelleAutor techfoobar

  2. 4

    .next('.to-date') nichts zurück, denn Sie haben eine zusätzliche p zwischen

    Müssen Sie .parent().next().find('.to-date').

    Müssen Sie möglicherweise anpassen, wenn Ihre dom ist komplexer als dein Beispiel. Aber im wesentlichen läuft es auf so etwas wie dieses:

    $(".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, nur sehen Sie für die ID. Der folgende code sucht alle aus-Termine bekommt und der laut-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 Beispiel.

    Ja, aber ich wollte das nächste Element unabhängig von der markup, wie ich habe mehrere immer wiederkehrende Orte für diese, und ich möchte diese Funktionalität überall unabhängig von der markup.
    nun, dies ist sehr ineffizient...nur suchen die id dann! Sie haben eine id, so verwenden Sie es - dies ist viel schneller als das Durchlaufen der dom mit einem rekursiven Algorithmus. Ich passe meine Antwort zu zeigen, wie Sie das tun.

    InformationsquelleAutor Christoph

  3. 0

    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;
        }
    }
});
    Ich habe nicht versucht...aber da sind Sie Schleifen über alle Elemente in den Dom, ich glaube, das kann sehr ineffizient sein.
    Ich Stimme zu, was Sie besorgt sind. Aber auch andere Formen der Traversierung wird mehr scripting. Weiter glaube ich nicht, dass die Traversierung durch die gesamte DOM wird viel Zeit für diese Ebene zu suchen.

    InformationsquelleAutor Tejasva Dhyani

  4. 0
        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. zu erhalten der Schlüssel-Nummer aus Ihrem id. Analyse es als Ausgabe die Anzahl. Verwenden JQ. selecter kombinieren Sie den string mit der Sie wollen als + dieser Zahl. Hoffe, dies kann Ihnen helfen, zu.

    InformationsquelleAutor Chung Solomon

Schreibe einen Kommentar