クラス内の子供の数を検出する方法は？

Question

無限ループのコンテンツスライダを作成しようとしています。私は現在、3つの項目をループしているが、それはスクリプトを更新することなく、常にループすることができる関数を実装したい。

私が疑問に思うのは、「xが.quoteの要素数より大きい場合は、これを実行します」というif文を作成できるかどうかです。または、.quoteを変数に割り当てる必要がありますか？ここで

は "xは.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(); 
    } 
}); 

Answer 1

ですあるいは、変数に.quoteを代入する必要がありますか？変数

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

なし

ていますが、あまりにも、それを変数に割り当てることができます。これは、長さが変わらない限り、長さの計算を何度も何度もやり直しているわけではないので、より効率的です。

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

Answer 2

は自動的if条件を使用するかのロジックを繰り返すことなく、第1の（またはその逆）への最後の項目からラップするモジュロ演算を使用する、これを試してください。

// 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/

Answer 3

$（ '引用符'）を参照してください子供（）の長さ。。。

Answer 4

これは無限のスクロールを実現します。 （私が次の/前のボタンで行ったことは、現在のオブジェクトを隠すためにx + 1/x-1のオブジェクトを表示することでしたが、この間にオブジェクトの制限に達するとxをリセットするチェックを行い、それぞれ次または前のボタンで、カウントは0。あなたのケースとあなたのFiddleは今、あなたがすでに持っているものの多くをめちゃくちゃにせずに連続スライダーを持っている最速かつ最も効率的な方法であるように

$(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(); 
    }); 
}); 

Answer 5

書かれた、あなたのコードでは、この小さなスニペットを配置することである。

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

$(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); 
 
});

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; 
 
}

<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>

Answer 6

https://jsfiddle.net/rvm1Lx4x/

OR

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

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

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

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

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; 
 
}

<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>