在特定元素之后获取具有特定类的下一个元素

I have a HTML markup like this:

我有这样的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>

I want to get the next element after from dates to get the corresponding to date. (Layout is a little more complex but from date has from-date class and to date has to-date class).

我想要在from之后获得下一个元素，以获得相应的to date。(布局稍微复杂一点，但是date有from-date类，而date有date类)。

This is I am trying to do, I want to take a from date element and find the next element in the dom with to-date class. I tried this:

这是我正在尝试做的，我想取一个from date元素，然后用date类找到dom中的下一个元素。我试着这样的:

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

but it is giving me empty jQuery element. I think this is because next gives the next sibling matching the selector. How can I get the corresponding to-date?

但是它给了我一个空的jQuery元素。我认为这是因为next给了下一个匹配选择器的同胞。我怎样才能得到相应的截止日期?

4 个解决方案

#1

Couldn't find a direct way of doing this, so wrote a little recursive algorithm for this.

找不到直接的方法，所以写了一个递归算法。

Demo: http://jsfiddle.net/sHGDP/

演示:http://jsfiddle.net/sHGDP/

nextInDOM() function takes 2 arguments namely the element to start looking from and the selector to match.

函数的作用是:获取两个参数，即要开始查找的元素和要匹配的选择器。

instead of

而不是

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

you can use:

您可以使用:

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

Code

代码

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
}

#2

.next('.to-date') does not return anything, because you have an additional p in between

.next('.to-date')不返回任何内容，因为中间还有一个额外的p

You need .parent().next().find('.to-date').

你需要.parent(). next();(“.to-date”)。

You might have to adjust this if your dom is more complicated than your example. But essentially it boils down to something like this:

如果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"));
});

edit: It's much better and faster to just look for the ID. The following code searches all from-dates and gets the according to-dates:

编辑:只要查找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));
}

Take a look at the example.

看看这个例子。

#3

try

试一试

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

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

Use JS. to get the key number from your id. Analysis it than output the number. Use JQ. selecter combine string with you want than + this number. Hope this can help you too.

使用JS。从你的id中获取关键数字。分析它而不是输出数字。使用金桥。选择器将字符串与您想要的+这个数字组合在一起。希望这对你也有帮助。

#1