Question

我需要在每个<div>的底部添加一个页面计数器，其中包含 page_container 类。

我需要它将每个div标签的页面计数器重置为1，其类为 resource_container 。

现在我的代码只计算总 page_container ，并且在新的 resource_container 启动时不会重置为1。

这是我的jquery：

$("document").ready(function() {
        buildPageBottoms('img');
    });

    function  buildPageBottoms(strWhichTag) {
        var cPageCount = 1;

        $(strWhichTag).each(function() {
           $(this).after($("<div class='pagenumber'><p>page " + cPageCount++ + "</p></div>"));
        });
    }

这是我的HTML：

<div class="resource_container">
  <div class="page_container" id="1"><img src="01a.png"> 
  </div>
  <div class="page_container" id="2"><img src="02a.png">  
  </div>
</div>

<div class="resource_container">
  <div class="page_container" id="1"><img src="01b.png"> 
  </div>
  <div class="page_container" id="2"><img src="02b.png"> 
  </div> 
  </div>
</div>

Answer 1

<强> JS：

$("document").ready(function () {
    buildPageBottoms('img', 'resource_container');
});

function buildPageBottoms(strWhichTag, strSplitterTag) {
    $('.' + strSplitterTag).each(function () {
        var cPageCount = 1;
        $('.' + strSplitterTag + ' > ' + strWhichTag).each(function () {
            $(this).after($("<div class='pagenumber'><p>page " + cPageCount+++"</p></div>"));
        });
    });
}

Answer 2

我相信这可以做你想要的：

$("document").ready(function () {  
   $(".resource_container").each(function() { // Loop through resource_containers
        var pageCount = 0;
        $(this).find(".page_container").each(function(){ // Loop through child page_containers
            $(this).append("<div class='pagenumber'><p>page " + (pageCount++) + "</p></div>");
        });
    });
});

还要将您的HTML修复为：

<div class="resource_container">
    <div class="page_container" id="1"><img src="01a.png" /> 
  </div>
    <div class="page_container" id="2"><img src="02a.png" />  
  </div>
</div>

<div class="resource_container">
    <div class="page_container" id="1"><img src="01b.png" /> 
  </div>
    <div class="page_container" id="2"><img src="02b.png" /> 
  </div> 
</div>

您忘记关闭img代码并拥有</div>代码。正如bipen所说，你应该为你的元素提供唯一的ID，并且除非你使用HTML5，否则从一个字母开始。

http://jsfiddle.net/6YZK8/

我需要我的jquery计数器在div中的最后一个img之后重置

2 个答案: