如何检测班级中的孩子数量？

时间：2017-01-16 18:20:38

标签： javascript jquery html css if-statement

我正在尝试创建一个无限循环的内容滑块。我目前已经循环了3个项目，但是想要实现一个允许它始终循环而不必更新脚本的函数。

我想知道的是，如果我可以创建一个if语句，“如果x大于.quote中的元素数量，那么就执行此操作。”或者我是否必须将.quote分配给变量？

以下是JSFiddle 

var x = 1;

$('.quote:nth-child(2)').hide();
$('.quote:nth-child(3)').hide();

$('#next').click(function(e){
    e.preventDefault();

    if(x === 3){
        $('.quote:nth-child(' + x + ')').hide();
        x = 1;
        $('.quote:nth-child(' + x + ')').show();
    }
    else{
        $('.quote:nth-child(' + x + ')').hide();
        x++;
        $('.quote:nth-child(' + x + ')').show();
    }
});

$('#prev').click(function(e){
    e.preventDefault();

    if(x === 1){
        $('.quote:nth-child(' + x + ')').hide();
        x = 3;
        $('.quote:nth-child(' + x + ')').show();
    }
    else{
        $('.quote:nth-child(' + x + ')').hide();
        x--;
        $('.quote:nth-child(' + x + ')').show();
    }
});

6 个答案:

答案 0 :(得分：2)

试试这个，它使用模运算自动从最后一个项目换行到第一个项目（反之亦然），而不使用任何if条件或重复逻辑。

// current position, and cache of child nodes

var x = 0;
var $q = $('.container').children('.quote');

// increase or decrease X, wrapping within the number of elements

$('#next').on('click', function() {
    $q.eq(x).hide();
    x = (x + 1) % $q.length;              // increase x, with wrapping
    $q.eq(x).show();
});

$('#prev').on('click', function() {
    $q.eq(x).hide();
    x = (x + $q.length - 1) % $q.length;  // decrease x, with wrapping
    $q.eq(x).show();
});

x = x + $q.length - 1中的额外添加是为了确保x永远不会变为负数。

请参阅https://jsfiddle.net/alnitak/5xfyk1e4/1/

答案 1 :(得分：1)

  

“如果x大于.quote中的元素数量，请执行此操作。”或者我是否必须将.quote分配给变量？

没有变量

if (x > $('.quote').length) { do stuff... }

但您也可以将其分配给变量。这样效率更高，因为您不会不必要地反复执行长度计算 - 只要长度不变。

var quote = $('.quote').length;
if (x > quote) { do stuff... }

答案 2 :(得分：1)

这应该为您实现无限滚动。 （我在next / prev按钮中做了什么，先是隐藏当前对象，然后相应地显示x + 1 / x-1对象。但是在这之间我做了一个检查，如果达到了对象的限制，则重置x-分别在next或prev按钮中计数或0。

$(document).ready(function() {
  console.log('jQuery started.');

  var x = 1;

  $('.quote:nth-child(2)').hide();
  $('.quote:nth-child(3)').hide();

  $('#next').click(function(e) {
    e.preventDefault();
    $('.quote:nth-child(' + x + ')').hide();
    if (x > $('.quote').length) {
         x=1;
    }
    else {
        x++;
    }
    $('.quote:nth-child(' + x  + ')').show();
  });

  $('#prev').click(function(e) {
    e.preventDefault();

    $('.quote:nth-child(' + x + ')').hide();
    if (x == 0) {
         x=1;
    }
    else {
        x--;
    }
    $('.quote:nth-child(' + x  + ')').show();
  });
});

答案 3 :(得分：1)

https://jsfiddle.net/rvm1Lx4x/

OR

＆＃13;
＆＃13; 
$(document).ready(function() {
  console.log('jQuery started.');

  $('.quote').hide();
  
    $('.quote:first').show().addClass("first");
    $('.quote').last().addClass("last");

  $('#next').click(function(e) {
    e.preventDefault();
		var active = $('.quote:visible');
    
    if($(active).hasClass("last")){
    	$('.quote.first').show();
      $(active).hide();
    }
    else{
      $(active).hide().next().show();
    }
    
  });

  $('#prev').click(function(e) {
    e.preventDefault();
		var active = $('.quote:visible');
    
    if($(active).hasClass("first")){
    	$('.quote.last').show();
      $(active).hide();
    }
    else{
      $(active).hide().prev().show();
    }
    
  });
});
＆＃13; 
html,
body {
  margin: 0 auto;
}

.slider {
  padding: 10px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  line-height: 28px;
}

.container {
  max-width: 800px;
}

p {}

h3 {
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
}

.nav {
  margin-top: 30px;
}

#prev {}

#prev:hover {
  opacity: 0.5;
}

#next {
  margin-left: 60px;
}

#next:hover {
  opacity: 0.5;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <div class="slider">

    <div class="container">
      <div class="quote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum, erat sed aliquet vestibulum, est sapien pharetra mi, nec scelerisque eros justo et mauris. Aliquam erat volutpat. Phasellus sagittis augue varius enim cursus tempus. Praesent
          lacinia a dui non hendrerit. Suspendisse sit amet euismod enim. Sed suscipit ultrices imperdiet.</p>
        <h3>John Doe</h3>
      </div>

      <div class="quote">
        <p>Morbi consectetur augue sit amet tristique dapibus. Mauris convallis arcu nec velit commodo congue. Pellentesque ac lectus a quam tristique lacinia. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
        <h3>John Doe</h3>
      </div>

      <div class="quote">
        <p>In velit lorem, lobortis ut sem non, pharetra porta leo. Donec odio leo, finibus quis suscipit eu, vulputate vitae elit. Ut sodales ultrices malesuada. Sed luctus porta lorem a sodales. Vivamus bibendum elit et augue sagittis, ac convallis massa
          suscipit.
        </p>
        <h3>John Doe</h3>
      </div>
    </div>

    <div class="nav">
      <a id="prev" href="#">Previous</a>
      <a id="next" href="#">Next</a>
    </div>
  </div>

</body>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

。

$（ '引号'）的儿童（）长度;

答案 5 :(得分：0)

在你的情况下，你的Fiddle现在是最快捷，最有效的方式来获得一个连续的滑块而不会弄乱你已经写过的很多内容，就是将这个小片段放在你的代码中。 

setInterval(function() {$('#next').trigger("click")},3000);

＆＃13;
＆＃13; 
$(document).ready(function() {
  console.log('jQuery started.');
  var x = 1;
  // check how many elements you have
  var n = $('.quote').length;
 
  $('.quote').not(':nth-child(0)').hide();

  $('#next').click(function(e) {
    e.preventDefault();
    // check if you reached last element
    if (x === n) {
      $('.quote:nth-child(' + x + ')').hide();
      x = 1;
      $('.quote:nth-child(' + x + ')').show();
    } else {
      $('.quote:nth-child(' + x + ')').hide();
      x++;
      $('.quote:nth-child(' + x + ')').show();
    }
  });

  $('#prev').click(function(e) {
    e.preventDefault();
    if (x === 1) {
      $('.quote:nth-child(' + x + ')').hide();
      // set to last
      x = n;
      $('.quote:nth-child(' + x + ')').show();
    } else {
      $('.quote:nth-child(' + x + ')').hide();
      x--;
      $('.quote:nth-child(' + x + ')').show();
    }
  });
  /* always loop by simply "clicking" next in case you don't need
  to start automatically */
  setInterval(function() {$('#next').trigger("click")},3000);
});
＆＃13; 
html,
body {
  margin: 0 auto;
}

.slider {
  padding: 10px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  line-height: 28px;
}

.container {
  max-width: 800px;
}

p {}

h3 {
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
}

.nav {
  margin-top: 30px;
}

#prev {}

#prev:hover {
  opacity: 0.5;
}

#next {
  margin-left: 60px;
}

#next:hover {
  opacity: 0.5;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <div class="slider">

    <div class="container">
      <div class="quote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum, erat sed aliquet vestibulum, est sapien pharetra mi, nec scelerisque eros justo et mauris. Aliquam erat volutpat. Phasellus sagittis augue varius enim cursus tempus. Praesent
          lacinia a dui non hendrerit. Suspendisse sit amet euismod enim. Sed suscipit ultrices imperdiet.</p>
        <h3>John Doe</h3>
      </div>

      <div class="quote">
        <p>Morbi consectetur augue sit amet tristique dapibus. Mauris convallis arcu nec velit commodo congue. Pellentesque ac lectus a quam tristique lacinia. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
        <h3>John Doe</h3>
      </div>

      <div class="quote">
        <p>In velit lorem, lobortis ut sem non, pharetra porta leo. Donec odio leo, finibus quis suscipit eu, vulputate vitae elit. Ut sodales ultrices malesuada. Sed luctus porta lorem a sodales. Vivamus bibendum elit et augue sagittis, ac convallis massa
          suscipit.
        </p>
        <h3>John Doe</h3>
      </div>
      
      <div class="quote">
        <p>No1 In velit lorem, lobortis ut sem non, pharetra porta leo. Donec odio leo, finibus quis suscipit eu, vulputate vitae elit. Ut sodales ultrices malesuada. Sed luctus porta lorem a sodales. Vivamus bibendum elit et augue sagittis, ac convallis massa
          suscipit.
        </p>
        <h3>John Doe</h3>
      </div>
      
      <div class="quote">
        <p>No2 In velit lorem, lobortis ut sem non, pharetra porta leo. Donec odio leo, finibus quis suscipit eu, vulputate vitae elit. Ut sodales ultrices malesuada. Sed luctus porta lorem a sodales. Vivamus bibendum elit et augue sagittis, ac convallis massa
          suscipit.
        </p>
        <h3>John Doe</h3>
      </div>
      
    </div>

    <div class="nav">
      <a id="prev" href="#">Previous</a>
      <a id="next" href="#">Next</a>
    </div>
  </div>

</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题