javascript - 抓取数组中的上一个和下一个元素

Question

我正在制作一个图片库。现在我有一些像这样的图像

<ul id="moniqueGalList">
    <li><img class="moniqueThumbs" src="img/1Thumb.jpg" data-bigimgpath="img/1Full.jpg" alt=""></li>
    <li><img class="moniqueThumbs" src="img/2Thumb.jpg" data-bigimgpath="img/2Full.jpg" alt=""></li>
    <li><img class="moniqueThumbs" src="img/3thumb.jpg" data-bigimgpath="img/3Full.jpg" alt=""></li>
    <li><img class="moniqueThumbs" src="img/4thumb.jpg" data-bigimgpath="img/4Full.jpg" alt=""></li>
    <li><img class="moniqueThumbs" src="img/5thumb.jpg" data-bigimgpath="img/5full.jpg" alt=""></li>
</ul>

并使用点击功能捕获当前点击的图像

for (var i = 0; i < moniqueThumbs.length; i++) {
    moniqueThumbs[i].addEventListener("click", grabBigImgPath);
}

function grabBigImgPath() {
    var currentThumbClicked = this;
}

如何保存 moniqueThumbs 数组中的前一个元素和下一个元素(即 varPrev 和 VarNext 值)？

Answer 1

我认为您是说，当点击其中一张图像时，您希望将变量设置为上一张图像(如果有)和下一张图像(如果有)。

如果是这样，您可以这样做:

function grabBigImgPath() {
    var currentThumbClicked = this;
    var li = this.parentNode;
    var prevThumb = li.previousElementSibling && li.previousElementSibling.firstElementChild;
    var nextThumb = li.nextElementSibling && li.nextElementSibling.firstElementChild;
}

如果没有上一个或下一个元素，这些将为null。

previousElementSibling/nextElementSibling/firstElementSibling:您的 DOM 结构是一系列 li 元素，每个元素包含一个img。 li 元素是“同级”元素(它们共享相同的直接父元素)。元素的 previousElementSibling 是它之前的同级元素；它的 nextElementSibling 是它后面的元素。 firstElementChild 是元素中的第一个子元素。

IIRC，在 IE9 之前，IE 不支持这些 DOM 属性。如果你必须支持IE8，那就更痛苦了，因为你必须使用previousSibling/nextSibling/firstChild，它可以是非- Element 节点，这意味着你必须循环。

实例:

var moniqueThumbs = document.querySelectorAll(".moniqueThumbs");
for (var i = 0; i < moniqueThumbs.length; i++) {

  moniqueThumbs[i].addEventListener("click", grabBigImgPath);
}

function grabBigImgPath() {
  var currentThumbClicked = this;
  var li = this.parentNode;
  var prevThumb = li.previousElementSibling && li.previousElementSibling.firstElementChild;
  var nextThumb = li.nextElementSibling && li.nextElementSibling.firstElementChild;
  
  snippet.log("Clicked: " + this.getAttribute("data-bigimgpath"));
  snippet.log("Previous: " + (prevThumb ? prevThumb.getAttribute("data-bigimgpath") : "(none)"));
  snippet.log("Next: " + (nextThumb ? nextThumb.getAttribute("data-bigimgpath") : "(none)"));
  snippet.logHTML("<hr>");
}

<ul id="moniqueGalList">
  <li>
    <img class="moniqueThumbs" src="img/1Thumb.jpg" data-bigimgpath="img/1Full.jpg" alt="">
  </li>
  <li>
    <img class="moniqueThumbs" src="img/2Thumb.jpg" data-bigimgpath="img/2Full.jpg" alt="">
  </li>
  <li>
    <img class="moniqueThumbs" src="img/3thumb.jpg" data-bigimgpath="img/3Full.jpg" alt="">
  </li>
  <li>
    <img class="moniqueThumbs" src="img/4thumb.jpg" data-bigimgpath="img/4Full.jpg" alt="">
  </li>
  <li>
    <img class="moniqueThumbs" src="img/5thumb.jpg" data-bigimgpath="img/5full.jpg" alt="">
  </li>
</ul>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

更多探索the DOM core specification .

如果你必须支持 IE8，我所说的那些循环看起来像这样:

function getPreviousElementSibling(element) {
    var prev;
    for (prev = element.previousSibling; prev; prev = prev.previousSibling) {
        if (prev.nodeType === 1) { // 1 = Element
            return prev;
        }
    }
    return null;
}

...这就是为什么我们有这么多像 jQuery、YUI 等库来帮助我们进行 DOM 遍历。 :-)