Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Joe Bruno
Joe Bruno
35,909 Points

jQuery Code Help: Works BUT UGLY | HELP SIMPLIFY

Hello,

I have an unordered list with some 300 generated listed items. For stylistic purposes, I wanted to take those list items, break them down into groups of 6 and add separate classes to each as 1 of 6, 2 of 6, 3 of 6, etc. For reasons related to the functionality of the web app, I cannot simply group them as unordered groups of six within my html markup. I used the following code to achieve my desired result

$(window).bind("load", function() { 
   $(document).ready(function () {

  $(".allFeeds li:nth-child(6n+1)").addClass("first");
      $(".first").next().addClass("second");
      $(".second").next().addClass("third");
      $(".third").next().addClass("fourth");
     $(".fourth").next().addClass("fifth");
     $(".fifth").next().addClass("sixth");
     $(".allFeeds li").eq(0).addClass("first");
     $(".allFeeds li").eq(1).addClass("second");
     $(".allFeeds li").eq(2).addClass("third");
    $(".allFeeds li").eq(3).addClass("fourth");
  });
 });

Again, this functionally achieves what I wanted to do, but its UGLY! How can I do it with less code?

I know I do not have to have the class iterated again at the front of each code line. In my code, I use dot notation. This is for demonstration purposes only.

Specifically, I am wondering if there is a way to abbreviate the classes added using a loop and/or index function. The class names don't matter. They simply specify different widths - that's it.

Thanks in advance for you help!

James Barnett
James Barnett
39,199 Points

In general using ALL caps online, signifies yelling. Not sure why you are yelling at us here about your code and demo purposes but it's not generally considered polite.

Joe Bruno
Joe Bruno
35,909 Points

Apologies. Not yelling. Simply drawing attention in hope of receiving a helpful answer.

James Barnett
James Barnett
39,199 Points

Ahh yes, Bolding is a much better choice than a whole sentence in ALL caps :smile:

Joe Bruno
Joe Bruno
35,909 Points

Indeed. =) Truth be told, though I have used the forums several times, this was the first time I had wanted to call attention to something; however, when the html markup didn't work, and I failed to notice the Markdown cheatsheet (oops), I used caps. Again, my bad.

1 Answer

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher

It looks like this is a complex use a case. You could do something like .element1, .element2 and the manipulate the strings. But I don't know if that'd be any more performant or logical to read.