得到一個特定類的下一個元素中的特定元素

後，我有一個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>

我想從日期後，即可獲取下一個元素，以獲得相應的更新。（佈局稍微複雜一些，但是從最初的課程開始到目前爲止的課程都已經過時）。

這是我正在嘗試做的，我想從日期元素中找到dom中具有迄今爲止的類的下一個元素。我試過這個：

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

但它給了我空的jQuery元素。我認爲這是因爲next給下一個兄弟匹配選擇器。我怎樣才能得到相應的to-date？

來源

2012-07-19 rubyprince

找不到這樣做的直接方式，所以爲此寫了一個小遞歸算法。

演示：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 
}

來源

2012-07-19 12:00:36 techfoobar

我試過了，它給了我下一個元素。你已經把它變成了一個很好的小功能。非常感謝。 – rubyprince 2012-07-20 15:38:33

很高興工作。 :)這是一個非常酷的問題要解決，實際上我認爲像'nextInDOM（）'在很多地方都會有用。 – techfoobar 2012-07-20 15:47:27

是的，我在我的網站中使用它來使日曆默認日期到日期選擇的日期。非常感謝，我一定會在未來的項目中使用這個功能。 – rubyprince 2012-07-20 17:23:00

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

看看example。

來源

2012-07-19 11:42:45 Christoph

是的，但我希望獲得下一個項目，而不考慮標記，因爲我有幾個反覆出現的地方，我想在任何地方應用此功能，而不考慮標記。 – rubyprince 2012-07-20 15:40:26

好吧，這是非常低效的......只是尋找身份證！你有一個id，所以使用它 - 這是更快的，然後遍歷dom與遞歸算法。我將編輯我的答案，告訴你如何做到這一點。 – Christoph 2012-07-20 18:03:53

嘗試

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-19 12:41:13

我沒有嘗試這個......但是因爲你正在循環Dom中的所有元素，我相信這可能是非常低效的。 – rubyprince 2012-07-20 17:56:41

我同意你關心的事情。但其他形式的遍歷將使用更多的腳本。此外，我不相信遍歷整個DOM將花費很多時間來進行這種搜索。 – 2012-07-23 05:23:53

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。選擇結合字符串與你想比+這個數字。希望這可以幫助你。

來源

2018-02-09 10:31:22

得到一個特定類的下一個元素中的特定元素

回答

相關問題