Question

即使我的编码经验有限，这似乎也是一个非常糟糕的问题，但如果我可以自己或在这里找到解决方案，我该死的。我的HTML页面上有多个元素，类为.innertables。我是基于一个单独的变量，将这个类包装在动态生成的HTML中，如下所示：

var limit = 3 //dynamically generated, could be any integer
$( ".innertables" ).each(function() {
    var divs = $(this).children('.togcont').slice(0,limit); 
        for(var i = 0; i < limit; i++) {
            divs.wrapAll("<div class='wrap'><div class='pre'></div><div class='morecont'>More -&gt;</div><div class='lesscont'>&lt;- Back</div> </div>");
        }
    });

这将生成此示例HTML代码段的多个实例：

<div class="innertables">
    <div class="wrap">
        <div class="pre">Header Text
            <div class="togcont">Text 1</div>
            <div class="togcont">Text 2</div>
            <div class="togcont">Text 3</div>
        </div>
        <div class="morecont">More -&gt;</div>
        <div class="lesscont">&lt;- Back</div>
    </div>
   <div class="wrap">
        <div class="pre">Header Text
            <div class="togcont">Text 4</div>
            <div class="togcont">Text 5</div>
            <div class="togcont">Text 6</div>
        </div>
        <div class="morecont">More -&gt;</div>
        <div class="lesscont">&lt;- Back</div>
    </div>
   <div class="wrap">
        <div class="pre">Header Text
            <div class="togcont">Text 7</div>
            <div class="togcont">Text 8</div>
            <div class="togcont">Text 9</div>
        </div>
        <div class="morecont">More -&gt;</div>
        <div class="lesscont">&lt;- Back</div>
    </div>
</div>

到目前为止，这么好。我想要做的是在morecont的第一个实例中添加第二个类，在morecont的每个实例中添加lesscont和.innertables的最后一个实例。似乎在.innertables的每个循环中添加以下内容可以解决问题：

$( ".morecont" ).first().addClass( "shiftleft" ); 
$( ".lesscont" ).last().addClass( "hide" );
$( ".morecont" ).last().addClass( "hide" );

但是这会将类添加到页面上所有.morecont中的第一个.innertables，以及所有这些类中的最后一个实例。我尝试了不同的方法，例如添加.wrap作为第一个类，例如$( ".wrap .morecont" ).first()，结果相同，$( ".wrap .morecont:first-child" ).addClass( "shiftleft" );之类的内容完全没有结果。我理解.each（）循环将遍历.innertables的每个实例，并且能够对每个循环的实例进行更改。我在这里做错了什么？

Answer 1

尝试使用jQuery的每个功能。

$(".innertables").each(function() {
   $(this).find(".morecont").first().addClass( "shiftleft" );
   $(this).find(".lesscont").last().addClass( "hide" );
   $(this).find(".morecont").last().addClass( "hide" );
});

这基本上告诉jQuery在每个.innertable的范围内找到在范围内的第一个/最后一个。

您做错了的原因是您使用的是.each()循环，但您并未使用$(this).children( "selector" )缩小所选元素的范围。如果您直接使用$( "selector" )，即使它.each()内有效，也无法使用。

修改：将.children()更改为.find()

将类添加到每个循环动态生成的第一个/最后一个元素

1 个答案: