Javascript 如何使用js/jquery显示具有相同类的一系列元素？

我正在制作一个电子商店，我想在每页上显示12种产品。在products下，我创建了动态页面计数器（带有相应数字的div）。所需的行为是：当单击带有“1”的框时，您将获得具有相同类别的前12个项目，当单击“2”时，将获得具有相同类别的下12个项目，依此类推

鉴于这种结构：

<div id="products">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
  <div class="item">item 10</div>
  <div class="item">item 11</div>
  <div class="item">item 12</div>
  <div class="item">item 13</div>
  <div class="item">item 14</div>
  <div class="item">item 15</div>
  <div class="item">item 16</div>
  <div class="item">item 17</div>
  <div class="item">item 18</div>
  <div class="item">item 19</div>
  <div class="item">item 20</div>
  <div class="item">item 21</div>
  <div class="item">item 22</div>
  <div class="item">item 23</div>
  <div class="item">item 24</div>
  <div class="item">item 25</div>
  <div class="item">item 26</div>
</div>

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
项目11
项目12
项目13
项目14
项目15
项目16
项目17
项目18
项目19
项目20
项目21
项目22
项目23
项目24
项目25
项目26

我应该如何使用js或jquery来显示相应的12个产品

编辑：这是根据产品数量插入带有“1”、“2”、“3”的按钮的方式：

numItems = $('.item').length;
numPages = numItems / 12;
lastPage = numItems % 12;

for (i = 0; i <= numPages; i++) {
$('#page-counter').append('<div class="prod-page"></div>' );
}

if (lastPage >= 1) {
$('#page-counter').append('<div class="prod-page"></div>' );
}

$(".prod-page").each(function(i) {
$(this).text(++i);
});

numItems=$（'.item'）.length；
numPages=numItems/12；
lastPage=numItems%12；
对于（i=0；i=1）{
$（'#页面计数器'）。附加（''）；
}
$（“.prod页”）。每个（功能（i）{
$（此）.text（++i）；
});

---

如您所见，它们是动态生成的，因此我应该能够将所需的行为应用于数量不确定的按钮。

我建议您使用此jquery扩展

代码的工作示例（您要求的是将items\u per\u page属性设置为12）

---

如果单击内容以“go to”开头的div，您将看到正确的项目。

我建议您使用此jquery扩展

代码的工作示例（您要求的是将items\u per\u page属性设置为12）

如果您单击内容以“go to”开头的div，您将看到正确的项目。

更“暴力”，更不优雅的方法-

JS

var itemsperpage=5；
var pagenumber=1；
var-firstelement=0；
var-divid；
$（'.holder div'）。在（'click'，function（）上{
$（'.holder2 div'）.hide（）；
pagenumber=此.id.slice（-1）；
第一个元素=（（页码-1）*itemsperpage）+1；
lastelement=（firstelement+itemsperpage）；
对于（var n=firstelement；n一种更“野蛮的力量”，更不优雅的方法-

JS

var itemsperpage=5；
var pagenumber=1；
var-firstelement=0；
var-divid；
$（'.holder div'）。在（'click'，function（）上{
$（'.holder2 div'）.hide（）；
pagenumber=此.id.slice（-1）；
第一个元素=（（页码-1）*itemsperpage）+1；
lastelement=（firstelement+itemsperpage）；
对于（var n=firstelement；n，这里有一个解决问题的方法，不需要使用仅外部插件的jQuery代码。

通过单击按钮i div，每个12 div项目动态添加按钮。显示项目。

您需要的所有jquery代码是：

<script type="text/javascript">
$(document).ready(function(){
    var arr=[]
    for(i=0;i<$('.item').length;i+=12){
        arr.push(i)
        }
    arr.push($('.item').length)
    for(i=0;i<(arr.length-1);i++){
        $('<input name="" type="button" class="button" id="'+arr[i]+','+arr[i+1]+'" value="'+(arr[i]+1)+','+arr[i+1]+'">').appendTo('body')
        }
    $('.button').click(function(){
        $('div.item').hide()
        var divs=$('.item')
        var range=$(this).attr('id').split(',')
        divs.slice(range[0],range[1]).css({'display':'block'})
        })
})
</script>


$（文档）.ready（函数（）{
var arr=[]
对于（i=0；i，这里有一个解决您的问题的方法，而不需要使用仅外部插件的jQuery代码。

通过单击按钮i div，每个12 div项目动态添加按钮。显示项目。

您需要的所有jquery代码是：

<script type="text/javascript">
$(document).ready(function(){
    var arr=[]
    for(i=0;i<$('.item').length;i+=12){
        arr.push(i)
        }
    arr.push($('.item').length)
    for(i=0;i<(arr.length-1);i++){
        $('<input name="" type="button" class="button" id="'+arr[i]+','+arr[i+1]+'" value="'+(arr[i]+1)+','+arr[i+1]+'">').appendTo('body')
        }
    $('.button').click(function(){
        $('div.item').hide()
        var divs=$('.item')
        var range=$(this).attr('id').split(',')
        divs.slice(range[0],range[1]).css({'display':'block'})
        })
})
</script>


$（文档）.ready（函数（）{
var arr=[]
对于（i=0；i）你的问题是“第1页”和“第2页”只是同一个实际网页的不同视图，所以你只是在问如何隐藏/显示产品，以便一次只显示12个而不实际更改页面？或者你是在问如何更改后端基础结构，以便在任何给定网页中只显示12个产品？第一个选项-我不想重新加载页面，所以它相当高ding用类“item”进行div，并显示前12、第二12、第三12等。Page1、Page2、Page3是我单击时要使用的按钮。它们看起来像这样：在你的问题中是“Page1”和“Page2”只是同一个实际网页的不同视图，所以你只是在问如何隐藏/显示产品，以便一次只显示12个而不实际更改页面？或者你是在问如何更改后端基础结构，以便在任何给定网页中只显示12个产品？第一个选项-我不想重新加载页面，所以它相当高用类“item”进行div显示第一个12、第二个12、第三个12等。第1、第2、第3页是我单击时想要使用的按钮。它们看起来是这样的：非常有用，谢谢！不过这次我想使用我现有的代码-我是一个新手，并向自己承诺用我自己的代码练习，而不是使用扩展/插件r有时：）如果只想编写代码，可以使用jquery切片函数。例如：
$（“.content.item”）.slice（0,12）
选择前12项，然后您可以将css显示设置为“阻止”，而对其他项则设置为“无”。我以前考虑过。幻灯片，但对我来说，重要的是使其更加自动化—例如：计算“.prod page”项的数量（它在文档中出现的次数）然后为它们中的每一个创建.slice片段。例如，如果.prod page出现5次，然后创建某种循环，.slice参数每次增加12个。我知道我就快到了，但不知为什么我被卡住了。好吧，谢谢你，我会在这段时间内尝试找出它来练习。哦，天哪，我有很多新代码，但无论如何，它工作得很好，thnx！我接受你的答案。非常有用，谢谢！这次我想继续使用我现有的代码-我是一个新手，并向自己承诺，在一段时间内使用我自己的代码，而不是使用扩展/插件：）如果只想编写代码，可以使用jquery切片函数。例如：
$（“.content.item”）.slice（0,12）
取前12项，然后您可以将css显示设置为“阻止”，而对其他项则设置为“无”。我以前考虑过使用.slide，但对我来说，重要的是使其更加自动化—例如：计算“.prod page”项的数量（它在文档中出现的次数），并为每个项创建.sl
<div id="products">
    <div id="breadcrumbContainer"></div>
    <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
  <div class="item">item 10</div>
  <div class="item">item 11</div>
  <div class="item">item 12</div>
  <div class="item">item 13</div>
  <div class="item">item 14</div>
  <div class="item">item 15</div>
  <div class="item">item 16</div>
  <div class="item">item 17</div>
  <div class="item">item 18</div>
  <div class="item">item 19</div>
  <div class="item">item 20</div>
  <div class="item">item 21</div>
  <div class="item">item 22</div>
  <div class="item">item 23</div>
  <div class="item">item 24</div>
  <div class="item">item 25</div>
  <div class="item">item 26</div>
</div>

.item{background-color:green;width:100px;}

var itemsperpage = 5;
var pagenumber = 1;
var firstelement = 0;
var divid;

$('.holder div').on('click', function() {
    $('.holder2 div').hide();
    pagenumber = this.id.slice(-1);
    firstelement = ((pagenumber-1) * itemsperpage) + 1; 
    lastelement = (firstelement + itemsperpage);
    for(var n=firstelement; n<lastelement; n++)
       {
           $(".item:nth-child(" + n + ")").show();
        } 
});

<script type="text/javascript">
$(document).ready(function(){
    var arr=[]
    for(i=0;i<$('.item').length;i+=12){
        arr.push(i)
        }
    arr.push($('.item').length)
    for(i=0;i<(arr.length-1);i++){
        $('<input name="" type="button" class="button" id="'+arr[i]+','+arr[i+1]+'" value="'+(arr[i]+1)+','+arr[i+1]+'">').appendTo('body')
        }
    $('.button').click(function(){
        $('div.item').hide()
        var divs=$('.item')
        var range=$(this).attr('id').split(',')
        divs.slice(range[0],range[1]).css({'display':'block'})
        })
})
</script>