CODEWITHSUNDEEP
jquery
user1717480
user1717480

Reputation:

jQuery for looping

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

Upvotes: 0

Views: 123

Answers (3)

prodigitalson
prodigitalson

Reputation: 60413

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.

Upvotes: 1

VVV
VVV

Reputation: 7603

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>

Upvotes: 0

Jonathan de M.
Jonathan de M.

Reputation: 9828

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

Upvotes: 0

Related Questions