得到一个特定类的下一个元素中的特定元素

后，我有一个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

得到一个特定类的下一个元素中的特定元素

回答

相关问题