7

私はこのような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>

日付から次の要素を取得して、対応する日付を取得したいと思います。（レイアウトはもう少し複雑ですが、from dateにはfrom-dateクラスがあり、to dateにはto-dateクラスがあります）。

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

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

しかし、それは私に空のjQuery要素を与えています。nextこれは、セレクターに一致する次の兄弟を与えるためだと思います。対応するものを入手するにはどうすればよいto-dateですか？

4

5 に答える 5

8

これを行う直接的な方法が見つからなかったので、少し再帰的なアルゴリズムを書きました。

デモ: 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
}
于 2012-07-19T12:00:36.837 に答える
4

.next('.to-date')p間に追加があるため、何も返しません

が必要.parent().next().find('.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));
}

例を見てください。

于 2012-07-19T11:42:45.723 に答える
0

試す

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;
        }
    }
});
于 2012-07-19T12:41:13.287 に答える