CODEWITHSUNDEEP
javascriptjquery
Elijha
Elijha

Reputation: 181

Target by ID elements in array assigned by get() jQuery

Apologies if I get the terminology wrong here.

I have a 'grid' of images in html that I want to use jQuery to fade in each element randomly. One item in the grid is a Logo - I want it to fade in last. The grid size could be changed and the position of the 'logo' could also be different. Here is a reduced simplified output of the list.

<ul id="homepage-grid" class="projectsgrid row">
   <div  id="item1">
      <a href="http://website.com/" class="block" style="padding-bottom: 100%;background:url('15376.jpg')">      </a>
   </div>
   <div id="item2">
      <a href="http://website.com/" class="block" style="padding-bottom: 100%;background:url('15376.jpg')">      </a>
   </div>
   <div id="itemlogo" style="opacity: 0;">
      <a href="#" class="block" style="padding-bottom: 100%;">
         <div style="background-image:url('logoonly.png')" title="" class="logoblock"></div>
      </a>
   </div>
   <div id="item4">
      <a href="http://website.com/" class="block" style="padding-bottom: 100%;background:url('43576.jpg')">      </a>
   </div>
   <div id="item5">
      <a href="http://website.com/" class="block" style="padding-bottom: 100%;background:url('15346.jpg')">      </a>
   </div>
</ul>

I have the following script which will collect the elements into an array. But i can't figure out how to match the element with the 'itemlogo' ID in the collection to split it out and push it to the end of the array so it is last to 'fade in'. I have tried "div#itemlogo", "#itemlogo", "itemlogo" but nothing seems to match, and perhaps not knowing the name of what I am doing I can't find any references.

var elems = $('#homepage-grid > div').get();  // collect elements
console.log(elems);
    for (var i = elems.length - 1; i > 1; i--) { // Shuffle the order
        var j = Math.floor(Math.random() * (i + 1));
        var elem = elems[j];
        elems[j] = elems[i];
        elems[i] = elem;
    }
    
    elms = elems.push(elems.splice(elems.indexOf('div#itemlogo'), 1)[0]);  // pull logo to last??
    
    var i = 0;
    var timer = setInterval(function() { // animate fade them sequentially
      console.log(elems[i]).id();
        $(elems[i]).fadeTo( "slow" , 1);
        if (i === elems.length) {
            clearInterval(timer);
        }
        i++;
    }, 150);

Upvotes: 0

Views: 134

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

You're on the right path, but the key here is that you need to find a particular item. Those items are DOM elements, not strings or selectors on their own.

elems.push(
  elems.splice(
    elems.findIndex(node=>node.id === 'itemlogo'),
    1
  )[0]
);

findIndex allows you to pass a function that should return true for the item you want - in this case, you want the item whose ID is itemlogo. The rest is just the same push-splice thing you have already.

I would also like to praise your correct use of array shuffling. You can simplify it a little bit with destructuring:

[elems[i], elems[j]] = [elems[j], elems[i]];

Upvotes: 1

Related Questions