Get The Next Element With A Specific Class After A Specific Element

I have a HTML markup like this:

Arrive

Solution 1:

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

Demo: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);
    }
    returnnull;
}
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) returnfalse;
        });
        return found;
    }
    returnnull; // will/should never get here
}

Solution 2:

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

You need .parent().next().find('.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:

$(".from-date").each(function(){
    // for each "from-date" inputconsole.log($(this));
    // find the according "to-date" inputconsole.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:

functiongetDeparture(el){
    var toId = "#to-date"+el.attr("id").replace("from-date","");
    //do something with the value hereconsole.log($(toId).val());
}

var id = "#from-date",
    i = 0;

while($(id+(++i)).length){
    getDeparture($(id+i));
}

Take a look at the example.

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

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

    functionshowIntFromString(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.

Solution 5:

I know this is an old question, but I figured I'd add a jQuery free alternate solution :)

I tried to keep the code simple by avoiding traversing the DOM.

let inputArray = document.querySelectorAll(".calender");

functionnextInput(currentInput, inputClass) {
    for (i = 0; i < inputArray.length - 1; i++) {
        if(currentInput == inputArray[i]) {
            for (j = 1; j < inputArray.length - i; j++) {
                //Check if the next element exists and if it has the desired classif(inputArray[i + j] && (inputArray[i + j].className == inputClass)) {
                    return inputArray[i + j];
                    break;
                }
            }
        }
    }   
}

let currentInput = document.getElementById('from-date1');

console.log(nextInput(currentInput, 'to-date calender'));

If you know that the to date will always be the next input element with a class of "calender", then you don't need the second loop.

Share