CODEWITHSUNDEEP
jqueryhtmladdclasseachcss-selectors
jimiayler
jimiayler

Reputation: 694

Add Class to First / Last Elements Dynamically Generated by Each Loops

This does seem like a pretty dopey question even with my limited coding experience, but I'm damned if I can find the solution on my own, or here. I have multiple elements on my HTML page with a class of .innertables. I am, based on a separate variable, wrapping this class in dynamically generated HTML like so:

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

This generates multiple instances of this example HTML snippet:

<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>

So far, so good. What I want to do is add second classes to the very first instance of morecont and the last instances of morecont and lesscont in each instance of .innertables. It seems like adding the following to the each loop of .innertables would do the trick:

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

But this adds classes to the very first .morecont in ALL of the .innertables on the page, and the last instances in all of them, as well. I tried different things like adding .wrap as the first class, e.g. $( ".wrap .morecont" ).first(), with the same result, and something like $( ".wrap .morecont:first-child" ).addClass( "shiftleft" ); with no result at all. I understood an .each() loop would traverse every instance of .innertables and be able to makes changes to every one being looped. What am I doing wrong here?

Upvotes: 0

Views: 1924

Answers (1)

Tarun
Tarun

Reputation: 456

Try using jQuery's each function.

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

This basically tells jQuery to find the first/last of what you want within the scope of each .innertable.

What you're doing wrong is that you're using an .each() loop but you're not narrowing the selected elements down using $(this).children( "selector" ). It wouldn't work if you directly used $( "selector" ) even if it's inside .each().

edit: changed .children() to .find()

Upvotes: 2

Related Questions