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

马克·安德烈·贾卡里尼

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

<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值)?

TJ人群

我想您是说,当单击其中一张图像时,您想将变量设置为上一张图像(如果有)和下一张图像(如果有)。

如果是这样,您可以执行以下操作:

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元件,每个包含一个imgli元素是“兄弟”的元素(它们共享相同的直接父)。一个元素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>

DOM核心规范更多内容可供探索

如果您必须支持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遍历。:-)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何获取数组中的下一个和上一个元素,Ruby

来自分类Dev

获取json数组的下一个和上一个元素

来自分类Dev

列表中的Python Compare元素与上一个和下一个

来自分类Dev

在js数组中查找下一个和上一个键

来自分类Dev

下一个数组元素必须从上一个开始

来自分类Dev

Ember.js数组的上一个/下一个元素

来自分类Dev

根据上一个和下一个值拆分和枚举 R 中的序列元素

来自分类Dev

依靠上一个和下一个元素进行流处理

来自分类Dev

下一个和上一个元素的CSS选择器

来自分类Dev

循环中的上一个和下一个元素

来自分类Dev

使用下一个和上一个按钮循环遍历li元素

来自分类Dev

循环中的上一个和下一个元素

来自分类Dev

数组中基于字符串“ direction”的上一个或下一个元素

来自分类Dev

尝试使用索引获取数组的上一个和下一个项目

来自分类Dev

循环显示数组的下一个和上一个键

来自分类Dev

获取有序集合中的上一个和下一个元素

来自分类Dev

Python:在循环列表中查找上一个和下一个“True”元素

来自分类Dev

如何访问ArrayList中的上一个/下一个元素?

来自分类Dev

如何创建遍历数组中URL的jQuery上一个和下一个按钮(分页)

来自分类Dev

Java Swing-如何使下一个和上一个按钮显示数组中对象的变量?

来自分类Dev

如何使用按钮调用数组中的下一个和上一个值?

来自分类Dev

如何创建遍历数组中URL的jquery上一个和下一个按钮(分页)

来自分类Dev

Javascript下一个,上一个,数组中的随机数

来自分类Dev

在JavaScript中使用array.map()时,从数组中删除上一个和下一个元素

来自分类Dev

分页-jQuery DataTables中的上一个和下一个大小按钮

来自分类Dev

根据SQL中的下一个和上一个记录排序

来自分类Dev

FullCalendar中的“上一个”和“下一个”按钮产生“关闭”消息

来自分类Dev

在Elasticsearch中按日期获取上一个和下一个文档

来自分类Dev

比较Pandas列中的上一个和下一个不同的值

Related 相关文章

  1. 1

    如何获取数组中的下一个和上一个元素,Ruby

  2. 2

    获取json数组的下一个和上一个元素

  3. 3

    列表中的Python Compare元素与上一个和下一个

  4. 4

    在js数组中查找下一个和上一个键

  5. 5

    下一个数组元素必须从上一个开始

  6. 6

    Ember.js数组的上一个/下一个元素

  7. 7

    根据上一个和下一个值拆分和枚举 R 中的序列元素

  8. 8

    依靠上一个和下一个元素进行流处理

  9. 9

    下一个和上一个元素的CSS选择器

  10. 10

    循环中的上一个和下一个元素

  11. 11

    使用下一个和上一个按钮循环遍历li元素

  12. 12

    循环中的上一个和下一个元素

  13. 13

    数组中基于字符串“ direction”的上一个或下一个元素

  14. 14

    尝试使用索引获取数组的上一个和下一个项目

  15. 15

    循环显示数组的下一个和上一个键

  16. 16

    获取有序集合中的上一个和下一个元素

  17. 17

    Python:在循环列表中查找上一个和下一个“True”元素

  18. 18

    如何访问ArrayList中的上一个/下一个元素?

  19. 19

    如何创建遍历数组中URL的jQuery上一个和下一个按钮(分页)

  20. 20

    Java Swing-如何使下一个和上一个按钮显示数组中对象的变量?

  21. 21

    如何使用按钮调用数组中的下一个和上一个值?

  22. 22

    如何创建遍历数组中URL的jquery上一个和下一个按钮(分页)

  23. 23

    Javascript下一个,上一个,数组中的随机数

  24. 24

    在JavaScript中使用array.map()时,从数组中删除上一个和下一个元素

  25. 25

    分页-jQuery DataTables中的上一个和下一个大小按钮

  26. 26

    根据SQL中的下一个和上一个记录排序

  27. 27

    FullCalendar中的“上一个”和“下一个”按钮产生“关闭”消息

  28. 28

    在Elasticsearch中按日期获取上一个和下一个文档

  29. 29

    比较Pandas列中的上一个和下一个不同的值

热门标签

归档