通过 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 elementsconsole.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(

  elems.splice(

    elems.findIndex(node=>node.id === 'itemlogo'),

    1

  )[0]

);

findIndex允许您传递一个函数，该函数应true为您想要的项目返回 - 在这种情况下，您需要 ID 为 的项目itemlogo。其余的只是你已经拥有的相同的推拼接东西。

我还要表扬你对数组改组的正确使用。您可以通过解构稍微简化它：

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