jquery .eq 选择器的任何更短方式？

Question

startSliding($("div").eq(0));
startSliding($("div").eq(1));
startSliding($("div").eq(2));

我想知道是否有不同的方法可以只添加一个代码而不是每次都重复 eq 选择器。

startSliding($("div").eq(unlimited));

完整的js文件是：

startSliding($("div").eq(0));
startSliding($("div").eq(1));
startSliding($("div").eq(2));
startSliding($("div").eq(3));

    function startSliding (div) {

      var i = 0;
      var tid = null;
      var sec = 1/3; // <- you want 1 here
      var images = $("img", div).map(function () {
        return $(this).attr("src");
      }).get();

      $("img:gt(0)", div).remove();
      $("img", div).hover(function () {
        var $this = $(this);
        tid = setInterval(function () {
          i = (i + 1) % images.length;
          $this.attr("src", images[i]);
        }, 1000 * sec);
      }, function () {
        clearInterval(tid);
        $(this).attr("src", images[0]);
      });
    }

我在另一个问题中遇到了这样的问题，有人帮助了我很多，但现在我正在研究我的项目，我得到了更多关于我的项目的想法，我在页面中的 DIV 正在改变，有时在一个页面中我有 10 divs 有时每个 div 的 50.Adding eq 选择器也会影响页面速度。因此，如果有一个更短的代码可以完成相同的工作，那么 know.I 是一个 javascript 的 newbea :( https://jsfiddle.net/jhudrp8v/11/

谢谢！

Answer 1

这样做非常简单。你必须只使用 .each() jquery 方法。

检查下面的代码片段是否相同 -

// Added code
let elem = $('div.someclass');

elem.each(function(i) {
   startSliding(elem.eq(i));
});

// Your code
function startSliding (div) {
  var i = 0;
  var tid = null;
  var sec = 1/3; // <- you want 1 here
  var images = $("img", div).map(function () {
    return $(this).attr("src");
  }).get();

  $("img:gt(0)", div).remove();
  $("img", div).hover(function () {
    var $this = $(this);
    tid = setInterval(function () {
      i = (i + 1) % images.length;
      $this.attr("src", images[i]);
    }, 1000 * sec);
  }, function () {
    clearInterval(tid);
    $(this).attr("src", images[0]);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someclass">
  <img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
  <img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
  <img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
  <img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
  <img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>
<div class="someclass">
  <img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
  <img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
  <img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
  <img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
  <img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>
<div class="someclass">
  <img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
  <img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
  <img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
  <img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
  <img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>
<div class="someclass">
  <img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
  <img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
  <img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
  <img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
  <img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>

有关 .each() 的更多信息，请参阅 https://api.jquery.com/eq/

希望这对您有所帮助:)

jquery .eq 选择器的任何更短方式？

Any Shorter way for jquer .eq selector?

javascript

jquery

jquery-selectors