나는이 같은 HTML 마크 업이 특정 요소

Question

후 특정 클래스 다음의 요소를 얻을 :

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

내가 날짜에 해당하는 얻을 날짜로부터 한 후 다음의 요소를 싶어. (레이아웃은 좀 더 복잡하지만 날짜는 최신 클래스이고 날짜는 최신 클래스입니다.)

이 작업을 수행하려고합니다. date 요소를 가져 와서 dom의 다음 요소를 최신 클래스로 찾으려고합니다. 나는 이것을 시도했다 :

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

그러나 나는 비어있는 jQuery 요소를 제공하고있다. 이것은 next이 선택기와 일치하는 다음 형제를 제공하기 때문입니다. 해당 to-date을 얻으려면 어떻게해야합니까? 당신은 .parent().next().find('.to-date') 필요

사이에 당신이 추가 p을 가지고 있기 때문에

Answer 1

이렇게하는 직접적인 방법을 찾을 수 없으므로 약간의 재귀 알고리즘을 작성했습니다.

데모 :http://jsfiddle.net/sHGDP/

nextInDOM() 기능에서보고에 맞게 선택 시작, 즉 요소를이 개 인수를 사용합니다.

대신

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

당신은 사용할 수 있습니다

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

코드

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') 는 아무 것도 반환하지 않습니다.

dom이 예제보다 복잡하면이 값을 조정해야 할 수도 있습니다. 그러나 본질적으로 다음과 같이 변합니다.

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

편집 : ID를 찾는 것이 훨씬 빠르고 빠릅니다. 다음 코드는에-날짜에 따라-날짜에서 모두 검색하여 가져옵니다

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

는 example를 살펴 보자.

Answer 3

이

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

JS를 사용하십시오. 이드에서 키 번호를 얻으려면. 숫자를 출력하는 것보다 분석하십시오. JQ를 사용하십시오. 선택자가이 숫자보다 + 원하는 문자열을 결합하십시오. 희망이 당신을 도울 수 있습니다.