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!
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
24,915 PointsUsing 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">
<h2>Features</h2>
</div>
<ul class="col-md-9 col-md-offset-2">
<li> features </li>
<li> features </li>
<li> features </li>
</ul>
</div>
function listWidth($parentClass){
var $count = $($parentClass li).length;
var $Width;
var $containerWidth = $($parentClass ul).width();
console.log($containerWidth);
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)
}
listWidth('.features');
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsEdit: 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
24,915 PointsI 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 :-)
Jason Anello
Courses Plus Student 94,610 PointsYou'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.
David Endersby
24,915 PointsDavid Endersby
24,915 PointsThank 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
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsSorry 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 theliSorry for the confusion.