obtener el siguiente elemento con una clase específica después de un elemento específico

Question

Tengo un marcado HTML así:

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

que desea obtener el siguiente elemento después de la fecha para calcular el correspondiente a la fecha. (El diseño es un poco más complejo, pero desde la fecha tiene la clase desde la fecha y hasta la fecha tiene la clase actualizada).

Esto es lo que estoy tratando de hacer, quiero tomar un elemento de la fecha y encontrar el siguiente elemento en el dom con la clase de fecha. Intenté esto:

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

pero me está dando el elemento jQuery vacío. Creo que esto se debe a que next proporciona el siguiente hermano que coincide con el selector. ¿Cómo puedo obtener el to-date correspondiente?

Answer 1

No se pudo encontrar una forma directa de hacerlo, así que escribí un pequeño algoritmo recursivo para esto.

Demostración: función http://jsfiddle.net/sHGDP/

nextInDOM() tarda 2 argumentos a saber, el elemento para empezar a buscar desde y el selector de igualar.

en lugar de

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

puede utilizar:

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

Código

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') no devuelve nada, porque tiene un adicional de p entre

Es necesario .parent().next().find('.to-date').

Es posible que tenga que ajustar esto si su dom es más complicado que su ejemplo. Pero esencialmente se reduce a algo como esto:

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

edición: Es mucho mejor y más rápido que sólo tiene que buscar el ID. El siguiente código busca en todos los de-fechas y consigue el acuerdo a las fechas:

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

Tome un vistazo a la example.

Answer 3

tratar

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

Usar JS. para obtener el número clave de tu identificación. Analízalo y luego saca el número. Usa JQ. seleccionar cadena combinada con la que desee que + este número. Espero que esto también te pueda ayudar.