0

I am learning jQuery and need some help with looping and adding 1 to a class.

I have this thus far.

var $$ = jQuery;
$$(document).ready(function() {
var i = 1;
for (i < .dropdown_2columns ul li.drop) {
$$(".dropdown_2columns ul li.drop").addClass("dropfirst-" + i);
$$(".dropdown_2columns ul li .dropdown_2columns").addClass("tier3");
$$(".dropdown_2columns ul li .tier3").removeClass("dropdown_2columns");
$$(".dropdown_2columns .col_2 ul").addClass("firstsub");
$$(".dropdown_2columns .col_2:last-child").addClass("hide"); 
i++;
})
});

HTML

<div class="dropdown_2columns">
<div class="col_2">
<ul class="firstsub">
<li class="drop dropfirst"></li>
<li class="drop dropfirst"></li>
<li class="drop dropfirst"></li>
<li class="drop dropfirst"></li>
<li class="drop dropfirst"></li>
<li class="drop dropfirst"></li>
<li class="drop dropfirst"></li>
</ul>
</div>

I would like to increase the count of the dropfirst class for each li.dropfirst element. Any idea what I am doing wrong? P.S. I looked throughout this site for help but could not find what I am doing wrong.

Thanks

Improve this question
1

3 Answers 3

Reset to default
1

This is not a valid statement:

for (i < .dropdown_2columns ul li.drop)

It should be something like:

for (var i=1; i < $('.dropdown_2columns ul li.drop').length; i++)

Additionally using this syntax, the i will be incremented for you so there is no reason to do i++ inside the loop and you have defined i in the process of creating the loop.

There is no such thing as $$ unless you have created that function or aliased something to it in a bit of code you didn't post.

Now having said all that it isn't 100% clear what you are trying to do here from your code. I suspect what you want to do is similar to the solutions posted by Jonathan and ComputerArts but I'm not sure so I'll leave them to implementation examples and just stop at pointing out the glaring errors.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

yah I had to create that function. I updated my code. Am I suppose to enclose anything with the curly brackets. Can get it to work.
0

This should do it. FIDDLE

$(document).ready(function () {
    $('.dropdown_2columns').each(function (i) {
        $(this).find('ul li.drop').addClass('dropfirst-' + i);
        $(this).find('ul li .dropdown_2columns').addClass('tier3').removeClass('dropdown_2columns'); //there are no elements like this in your HTML
        $(this).find('.col_2 ul').addClass('firstsub');
        $(this).find('.col_2:last-child').addClass('hide');
    })
});

using .each() creates a loop. You can pass a parameter to the function... in this case 'i' which is a counter.

$(this) refers to the .dropdown_2colums element and then it finds children elements to manipulate.

ALSO your bullets are nested... I think you forgot to close them <li></li>

Improve this answer

5 Comments

In the fiddle all the li are zero and not counting.
Updated the fiddle in the answer. If you inspect the elements with firebug or something else, it does exactly what you asked.
Just tried this in my console and it printed out all 0 :( Not sure why.
@tech0925 Because in the code you're looping through all .dropdown_2columns... since you only have 1, the index is 0. Do you want each li.drop to have the same class or be incremental (dropfirst-1, dropfirst-2)... could you post the result HTML you're looking for?
Basically I am wanting to do this so I can use CSS to use clear: both; on every third li element. Is there a better way to do that? See previous message also.
0

Use each instead

$('.dropdown_2columns ul li.drop').each(function(i,v){
  $(".dropdown_2columns ul li.drop").addClass("dropfirst-" + i);
  $(".dropdown_2columns ul li .dropdown_2columns").addClass("tier3");
  $(".dropdown_2columns ul li .tier3").removeClass("dropdown_2columns");
  $(".dropdown_2columns .col_2 ul").addClass("firstsub");
  $(".dropdown_2columns .col_2:last-child").addClass("hide"); 
});

demo

Improve this answer

1 Comment

Doesn't work for me. It prints out the dropfirst class in the same li element over and over again.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.