jQuery 隐藏和显示第 n 个项目后的 div 列表
jQuery hide and show list of divs after nth item
更新以包含基本 Fiddle:http://jsfiddle.net/g28nc89t/1/
假设我有一组使用重复模式的 div,不是一个无序列表,它遵循以下结构:
<div class="one cards">
<div class="random_cms-class"><div class="card">...</div></div>
<div class="random_cms-class"><div class="card">...</div></div>
<div class="random_cms-class"><div class="card">...</div></div>
</div>
<div class="two cards">
<div class="random_cms-class"><div class="card">...</div></div>
<div class="random_cms-class"><div class="card">...</div></div>
<div class="random_cms-class"><div class="card">...</div></div>
</div>
使用 jQuery,我如何隐藏第三个项目后的每个 'card' 并创建一个切换到 show/hide 隐藏的卡片。考虑到卡片 UI 使用相同的 class,我不希望切换到 show/hide 所有卡片仅阻止该部分的卡片。我可以向每个卡片块添加 ID 或更具体的 classes。
我正在使用以下 js,它目前正在切换每个卡片实例,而不是只切换该部分。它还会在两个块之间触发 Show More 和 Show Less:
$('.cards').each(function(){
var max = 2
if ($(this).find(".card").length > max) {
$(this)
.find('.card:gt('+max+')')
.hide()
.end()
.append(
$('<div class="toggle"><a class="more">Show More</a></div>').click( function(){
$('.card:gt('+max+')').toggle();
if ( $('.more').length ) {
$(this).html('<a class="less">Show Less</a>');
} else {
$(this).html('<a class="more">Show More</a>');
};
})
);
}
});
该网站是响应式的,虽然我想要某种向上滑动/向下滑动的动画,但我认为它在这种情况下不实用。任何帮助将不胜感激。我尝试使用此堆栈作为指南:Jquery, hide & show list items after nth item
您可以使用 jQuery 的 slice() 获取第三个元素之后的所有元素并隐藏它们。请记住,所有这些元素仍将下载到浏览器,因此如果用户不展开它们,它们就会隐藏在视图之外,基本上是浪费精力。更好的解决方案可能是仅加载前三张卡片,然后在需要时使用 Ajaxy 加载来加载其余卡片。
以下是您可以按照您的要求进行操作的方法:
http://codepen.io/anon/pen/Qwmvmx
$( document ).ready(function() {
cards = $('.cards');
$.each(cards, function(key,value) {
$(this)
.find('.random_cms-class')
.slice(3)
.hide();
});
$('.show_more').show();
});
$('.show_more a').click(function() {
$(this).parent().parent().find(":hidden").show();
});
.random_cms-class {
display: inline-block;
}
.card {
width: 75px;
height: 75px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one cards">
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="show_more">
<a href="#">Show all...</a>
</div>
</div>
<div class="two cards">
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="show_more">
<a href="#">Show all...</a>
</div>
</div>
更新以包含基本 Fiddle:http://jsfiddle.net/g28nc89t/1/
假设我有一组使用重复模式的 div,不是一个无序列表,它遵循以下结构:
<div class="one cards">
<div class="random_cms-class"><div class="card">...</div></div>
<div class="random_cms-class"><div class="card">...</div></div>
<div class="random_cms-class"><div class="card">...</div></div>
</div>
<div class="two cards">
<div class="random_cms-class"><div class="card">...</div></div>
<div class="random_cms-class"><div class="card">...</div></div>
<div class="random_cms-class"><div class="card">...</div></div>
</div>
使用 jQuery,我如何隐藏第三个项目后的每个 'card' 并创建一个切换到 show/hide 隐藏的卡片。考虑到卡片 UI 使用相同的 class,我不希望切换到 show/hide 所有卡片仅阻止该部分的卡片。我可以向每个卡片块添加 ID 或更具体的 classes。
我正在使用以下 js,它目前正在切换每个卡片实例,而不是只切换该部分。它还会在两个块之间触发 Show More 和 Show Less:
$('.cards').each(function(){
var max = 2
if ($(this).find(".card").length > max) {
$(this)
.find('.card:gt('+max+')')
.hide()
.end()
.append(
$('<div class="toggle"><a class="more">Show More</a></div>').click( function(){
$('.card:gt('+max+')').toggle();
if ( $('.more').length ) {
$(this).html('<a class="less">Show Less</a>');
} else {
$(this).html('<a class="more">Show More</a>');
};
})
);
}
});
该网站是响应式的,虽然我想要某种向上滑动/向下滑动的动画,但我认为它在这种情况下不实用。任何帮助将不胜感激。我尝试使用此堆栈作为指南:Jquery, hide & show list items after nth item
您可以使用 jQuery 的 slice() 获取第三个元素之后的所有元素并隐藏它们。请记住,所有这些元素仍将下载到浏览器,因此如果用户不展开它们,它们就会隐藏在视图之外,基本上是浪费精力。更好的解决方案可能是仅加载前三张卡片,然后在需要时使用 Ajaxy 加载来加载其余卡片。
以下是您可以按照您的要求进行操作的方法:
http://codepen.io/anon/pen/Qwmvmx
$( document ).ready(function() {
cards = $('.cards');
$.each(cards, function(key,value) {
$(this)
.find('.random_cms-class')
.slice(3)
.hide();
});
$('.show_more').show();
});
$('.show_more a').click(function() {
$(this).parent().parent().find(":hidden").show();
});
.random_cms-class {
display: inline-block;
}
.card {
width: 75px;
height: 75px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one cards">
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="show_more">
<a href="#">Show all...</a>
</div>
</div>
<div class="two cards">
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="random_cms-class">
<div class="card">...</div>
</div>
<div class="show_more">
<a href="#">Show all...</a>
</div>
</div>