JQuery: Order of events and traverse the DOM

Question

I try the following:

One ul for the Links, another for the slides

<ul class="infoslider">
        <li><a data-orbit-link="slidegroup1" href="#">Slides1</a></li>
        <li><a data-orbit-link="slidegroup2" href="#">Slides2</a></li>
    </ul>

<ul id="infoslider">
    <li class=""        data-orbit-slide="slidegroup1">  <img src="img1.png" ></li>
    <li class="active"  data-orbit-slide="">             <img src="img2.png" ></li>
    <li class=""        data-orbit-slide="slidegroup2">  <img src="img3.png" ></li>
    <li class=""        data-orbit-slide="">             <img src="img4.png" ></li>
</ul>

The field to click for "next"

<a class="orbit-next" href="#">Next</a>

I click on "orbit-next" to forward the slides.

With JQuery I check the #infoslider li data-orbit-slide-attribute. If it is empty it traverses up until it finds on with a string in it. Then it adds the corresponding ul.infoslide li the active-class.

$j("a.orbit-next").click(function() {

    //select the active li
    var test = $j("#infoslider > li.active");

    //test, if there is a string in "data-orbit-slide"
    if (test.attr("data-orbit-slide").length > 0) {     
        var link = test.attr("data-orbit-slide");
        } else {        
        //if not, get the elements
        var term1 = document.getElementById('infoslider');
        //and traverse up until a string is found
        var link = $j("#infoslider li.active").prevUntil(term1,"li[data-orbit-slide!='']").attr("data-orbit-slide");        
        }       

        //select the coresponding a in div.infoslider
        var target = $j("a[data-orbit-link='" + link + "']").parent();  

        //remove the classes active
        $j("div.infoslider > ul > li").removeClass("active");
        //add the active class
        target.addClass("active");
});

This works almost fine. But:

1. The ul.infoslider li is always "one behind". I.e. when slide img3.png shows up, the active class is still on "slidegroup1". Not till "img4.png" shows up "slidegroup2" gets the active-class. Why? Has it something to do with the order of events executed by JQuery/Orbit-Slider/my JQuery?
2. Is there an easier way to achieve what I want?

Thanks in advance for your help.

Answer 1

Try the following and Your code should work fine.

target.next().addClass("active");

As an alternate implementation, You can use the Jquery data() utility to store the active slide information. This way the traversal up the list can be avoided. I have done a bit of optimization so that multiple DOM traversals can be avoided.

Here is the code snippet.

$(function () {
    //select the active li
    var $activeSlide = $("#infoslider > li.active");
    $("a.orbit-next").click(function () {
        if (!$activeSlide.length) { return; }
        var $nextSlide = $activeSlide.next();
        if (!$nextSlide.length) { return; }

        var slideGroup;
        //test, if there is a string in "data-orbit-slide"
        if ($nextSlide.attr("data-orbit-slide").length > 0) {
            slideGroup = $nextSlide.attr("data-orbit-slide");
            $(this).data("slideGroup", slideGroup);
        } else {
            slideGroup = $(this).data("slideGroup");
        }

        //remove the classes active
        $("ul.infoslider > li").removeClass('active');
        //select the coresponding a in div.infoslider
        $("a[data-orbit-link='" + slideGroup + "']").parent().addClass("active");
        $activeSlide.removeClass("active");
        $nextSlide.addClass("active");
        $activeSlide = $nextSlide;
    });
})

Answer 2

The following is the result:

//select the active li
var activeSlide = $j("#infoslider > li.active");
//populate with data, otherwise at the first click there is no data
slideStart = activeSlide.attr("data-orbit-slide");

$j("a.orbit-next").click(function () {

    //check if second-last-child, cause the slider is looping
    //2nd-child, 2nd-last, cause Orbit is cloning the first and the last slide
    if (activeSlide.is(":nth-last-child(2)") ) {
        var nextSlide = $j("#infoslider > li:nth-child(2)");
    } else {
        var nextSlide = activeSlide.next();
    }

    var slideGroup;
    //test, if there is a string in "data-orbit-slide"
    //not very elegant, but had no idea how to initiate the var slideGroup...
    if (nextSlide.attr("data-orbit-slide").length == 0 && slideStart.length > 0) {
        slideGroup = slideStart;
        slideStart = "";
    } else if(nextSlide.attr("data-orbit-slide").length > 0 && slideStart == ""){
        slideGroup = nextSlide.attr("data-orbit-slide");
        $(this).data("slideGroup", slideGroup);
    } else {
        slideGroup = $(this).data("slideGroup");
    }


    //remove the classes active
    $j("div.infoslider > ul > li").removeClass('active');
    //select the coresponding a in div.infoslider
    $j("a[data-orbit-link='" + slideGroup + "']").parent().addClass("active");
    activeSlide = nextSlide;
});