通过 get() jQuery 分配的数组中的 ID 元素定位

Question

如果我在这里弄错了术语，我深表歉意。

我在 html 中有一个图像“网格”，我想使用 jQuery 随机淡入每个元素。网格中的一项是徽标 - 我希望它最后淡出。网格大小可以更改，“徽标”的位置也可以不同。这是列表的简化输出。

<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>

我有以下脚本，它将元素收集到一个数组中。但我无法弄清楚如何将元素与集合中的“itemlogo”ID 匹配以将其拆分并将其推到数组的末尾，以便它最后“淡入”。我试过“div#itemlogo”、“#itemlogo”、“itemlogo”，但似乎没有任何匹配项，也许我不知道我正在做的事情的名称，我找不到任何参考。

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

Answer 1

你走在正确的道路上，但这里的关键是你需要find一个特定的项目。这些项目是 DOM 元素，而不是字符串或选择器本身。elems.push(&nbsp; elems.splice(&nbsp; &nbsp; elems.findIndex(node=>node.id === 'itemlogo'),&nbsp; &nbsp; 1&nbsp; )[0]);findIndex允许您传递一个函数，该函数应true为您想要的项目返回 - 在这种情况下，您需要 ID 为 的项目itemlogo。其余的只是你已经拥有的相同的推拼接东西。我还要表扬你对数组改组的正确使用。您可以通过解构稍微简化它：[elems[i], elems[j]] = [elems[j], elems[i]];