Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


David Endersby
David Endersby
24,915 Points

Using multiple function parameters in Jquery

So I'm trying to create a jQuery function that counts the number of li elements, takes the width of the Parent container, then calculates(or assigns) the width of the li elements. I calculation bit works fine as an ordinary bit of code but I want to turn it into a function so its reusable. The problem I'm having is that I can't seem to combine the function parameter with another selector. I'm sure its a jQuery fundamental but I can't figure it out.

   <div class="row features">
      <div class="col-md-12">
      <ul class="col-md-9 col-md-offset-2">
     <li> features </li>
         <li> features </li>
         <li> features </li>
function listWidth($parentClass){
        var $count = $($parentClass li).length;
        var $Width;
        var $containerWidth = $($parentClass ul).width();
        if($count <= 3){
            $width = $containerWidth / $count;
            $width = ($width / $containerWidth) * 100;
            $width = $width + "%";
        }else if($count < 6){
            $width = '50%';
        }else if($count < 8){
            $width = '33%';

    return $($parentClass li).css('width', $width)


2 Answers

Edit: See comment. I misunderstood what $parentClass was

Hi David,

You're probably looking for the .find() method.

var $containerWidth = $parentClass.find("ul").width();

You can do the same thing for the li

Is there any reason you can't pass in the ul instead of the parent of the ul? You don't seem to be using the $parentClass for anything other than as part of a descendant selector. It would simplify your code a little bit.

David Endersby
David Endersby
24,915 Points

Thank you Jason. It needed to something like this to avoid getting an error:

     var $containerWidth = $($parentClass).find("ul").width();

I'm coding it like that as I have put class names on the rows for different sections of the site. It means I can reuse this code for the different sections.

The more I think about it, the more I think your method could work too. Just personal choice I guess

Sorry David.

I missed that you were passing in a string of the class name. I missed the very last line showing how you call it and incorrectly assumed you were passing in a jQuery object. I also missed the clue in the variable name $parent*Class* Oh well.

In that case you could go back to something close to what you originally had.

var $containerWidth = $($parentClass + ' ul').width();

You're just building up the selector string so that it becomes '.features ul' Same idea with the li

Sorry for the confusion.

David Endersby
David Endersby
24,915 Points

I tell you whats annoying is that I almost stumbled upon something like that before I posted this question. The only thing thats different was the space before the ul. That space was causing the whole thing to break.

Ah well.

Thank you ever so much. All works beautifully now :-)

You're welcome.

Yes, that one little space makes a huge difference. Without it, it's trying to match a class name of "featuresul" which doesn't exist.

With the space, you get a descendant selector which does match.