基于data-attribute以特定顺序将DOM对象添加到数组

I'm building a custom slider, with the possibility for the end user, to prioritize which slides should come first, I figured the best way to do this was making a data-priority on each of the main DOM elements, that to start with are set to Opacity: 0, the maximum of DOM elements in this case is 3.

我正在构建一个自定义滑块,最终用户有可能优先考虑哪个幻灯片应该首先出现,我认为最好的方法就是在每个主要DOM元素上创建数据优先级,然后开始设置为Opacity:0,在这种情况下DOM元素的最大值为3。

However as you can see in the code, it will simply grab the DOM elements from the top and down, and ignore the data- value.

但是正如您在代码中看到的那样,它只是从顶部和底部抓取DOM元素,并忽略数据值。

How do I put these in the correct order into the array?

如何以正确的顺序将这些放入数组中?

    var hideSlide = 0;
    var showSlide = 1;
    var amountOfSlides = 2;
    var slideArray = [];
    var dataPriority = 1;

    $('.hero-detail-container').each(function(e) {
        if ( $(this).data('active') == '1' && $(this).data('priority') == '1' ) {
        slideArray.push($(this));
    }
    else if ( $(this).data('active') == '1' && $(this).data('priority') == '2' ) {
        slideArray.push($(this));
    }
    if ( $(this).data('active') == '1' && $(this).data('priority') == '3' ) {
        slideArray.push($(this));
    }

        // THE ISSUE IS HERE
        // The code will push to slideArray in the order
        // it sees the DOM elements from the top, even if
        // the priority says the first element is number 2 fx.

    });

    slideArray[0].css({
        "opacity": "1"
    });

    setInterval(function() {

        console.log(slideArray);

        slideArray[hideSlide].css({
            "opacity": "0"
        });
        slideArray[showSlide].css({
            "opacity": "1"
        });

        if ( showSlide >= amountOfSlides ) {
            hideSlide = amountOfSlides;
            showSlide = 0;
        }
        else if ( hideSlide == 2 && showSlide == 0 ) {
            hideSlide = 0;
            showSlide = 1;
        }
        else {
            hideSlide++;
            showSlide++;
        }

    }, slideTimer());

1 个解决方案

#1

Couple of methods to do this.

几个方法来做到这一点。

1: Have multiple arrays you push data too and then combine them at the end.

2: Loop through the data-set multiple times to push in the order you want. Use JQuery to get the elements you want.

3: Sort the array after you've added the elements.

3:添加元素后对数组进行排序。

slideArray.sort(function(a,b){ return a.data('priority') - b.data('priority') });

#1