0

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

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

现在我的代码只是不断计算总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>
4

2 回答 2

0

我相信这可以满足您的要求：

$("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/

于 2013-07-17T17:47:50.917 回答
0

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>"));
        });
    });
}
于 2013-07-17T17:41:55.440 回答