特定の要素

Question

後、私はこのようなHTMLマークアップを持っている特定のクラスで次の要素を取得します：私は、日付に対応する取得するには日付から後の次の要素を取得したい

<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からdateクラスまで、dateには最新のクラスがあります）。

これは私がやろうとしていることですが、私はdate要素を取得し、domの次の要素をto-dateクラスで見つけたいと思います。私はこれを試しました：

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

しかし、それは私に空のjQuery要素を与えています。これは、nextがセレクタに一致する次の兄弟を与えるからです。対応するto-dateを入手するにはどうすればよいですか？あなたはあなたが.parent().next().find('.to-date')が必要

の間に追加の pを持っているので

Answer 1

これを行う直接的な方法を見つけることができませんでしたので、少し再帰的なアルゴリズムを書いています。

デモ：http://jsfiddle.net/sHGDP/

nextInDOM()関数は2つの引数、すなわちから見て開始する要素と一致するセレクタをとります。代わりに

あなたが使用することができます

$('#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を探すだけではるかに速くなります。次のコードは、TO-日付に従って-日付から全て検索し、取得します。

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を使用してください。あなたのIDからキー番号を取得する。数値を出力するよりも分析します。 JQを使用します。セレクタあなたが+この番号よりも望む文字列を結合します。これがあなたにも役立つことを願っています。