SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding class to every third element

    Hi
    My current html:
    Code:
    <div class="lists-holder">
            <h3>
                Section</h3>
            <div class="list-hold">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                        <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
            <div class="list-hold">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
            <div class="list-hold">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
            <div class="list-hold">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
        </div>
        <div class="lists-holder">
            <h3>
                Section</h3>
            <div class="list-hold">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
            <div class="list-hold">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
            <div class="list-hold">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
        </div>
    Wanted output is the class "last" on every third list-hold within their section:
    Code:
    <div class="lists-holder">
            <h3>
                Section</h3>
            <div class="list-hold">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                        <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
            <div class="list-hold">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
            <div class="list-hold last">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
            <div class="list-hold">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
        </div>
        <div class="lists-holder">
            <h3>
                Section</h3>
            <div class="list-hold">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
            <div class="list-hold">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
            <div class="list-hold last">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
        </div>
    My problem is that I only manage to add the class "last" to every third element that as a class of list-hold. Difference being that in the first section I got four categories and in the second I got three. So in the first section it will add the class to the correct third element but then it counts the fourth element of the first section as one and then adds the class to the second element of the second section instead of the third.

    Here is the output with my javascript code to explain it better:
    Code:
    <div class="lists-holder">
            <h3>
                Section</h3>
            <div class="list-hold">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                        <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
            <div class="list-hold">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
            <div class="list-hold last">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
            <div class="list-hold">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
        </div>
        <div class="lists-holder">
            <h3>
                Section</h3>
            <div class="list-hold">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
            <div class="list-hold last">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
            <div class="list-hold">
                <div>
                    <h4>
                        Category</h4>
                </div>
                <ul>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                    <li><a href="#">
                        asdfgwe</a> </li>
                </ul>
            </div>
        </div>

  2. #2
    SitePoint Evangelist
    Join Date
    May 2006
    Location
    Denmark
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can try some of this:

    Code JavaScript:
    pattern = new RegExp("(^|\\\\s)list-hold(\\\\s|$)");
     
    nodes = document.getElementsByTagName('*');
    for (i = 0, j = 1, max = nodes.length; i < max; i++) {
    	if (pattern.test(nodes[i].className)) {
    		if (j % 3 == 0) {
    			nodes[i].className += " last";
    		}
    		j++;
    	}
    }

    I haven't tested it, but you can try that.

    If you use jQuery then it will be much simpler:

    Code JavaScript:
    $('.list-hold').each(function(i) {
    	if ((i + 1) % 3 == 0) {
    		this.addClass('test');
    	}
    });

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi
    Thanks for the help. Ended up using jQuery and just added a different id to each section to difference them.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •