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

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 sn-p 的多个实例：

<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" ); 

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

Answer 1

尝试使用 jQuery 的 each 函数。

$(".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()