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

JavaScript

Posted by Mikhailo Rozumovskyy
Mikhailo Rozumovskyy
3,779 Points

(DOM): How can i select any of List Items if i don't know how many they are.

I have my DOM like this (I load it from a json file):

<ul class="pizzaList" id="pizzaList">
    <li>Margarita</li>
    <li>Romana</li>
    <li>Napolitana</li>
    <li>Di Mari</li>
</ul>

I want just to click in any LI and choose it. should I earlier create a variable for each LI individually?

UPDATED. Guys, I just tasted it, and I can perfectly run your code IN CASE when <ul> is created directly in the HTML file, but when I add it from json file, I cannot traverse the dom and manipulate elements. New question is here: https://teamtreehouse.com/community/json-and-dom-traversing-problems

Kieran Barker
Kieran Barker
15,028 Points

I don’t fully understand your question!

6 Answers

Patrik Horváth
Patrik Horváth
11,110 Points
Patrik Horváth
Patrik Horváth
11,110 Points

Hi, its easy for example with jQuery

Function name : each() more about each - http://api.jquery.com/jquery.each/

jQuery("#pizzaList li").each(function (this) { this.on("click", function () { HERE WHAT SHOULD HAPPEND ON CLICK ON ANY LI ITEM , this mean clicked element } ) });
Mikhailo Rozumovskyy
Mikhailo Rozumovskyy
3,779 Points

Heey, Patrik. Also I am trying your code (as well i am looking jquery documentation) and it doesnt run. May it be because i load my pizza list with json file?

$(".pizzaList li").each(function() {
  $(this).on("click", function () {
  console.log( $(this).text() );
} ); });
Kieran Barker
Kieran Barker
15,028 Points
Kieran Barker
Kieran Barker
15,028 Points

If you want to loop through the list items and add an event listener without jQuery, you can do it like this:

const lis = document.querySelectorAll('li');

for (let i = 0; i < lis.length; i++) {
  lis[i].addEventListener('click', function() {
    // Do something
  });
}
Mikhailo Rozumovskyy
Mikhailo Rozumovskyy
3,779 Points

I am trying this code now, but nothing is happening. there is no response at all.

for (var i = 0; i < lis.length; i++) {
  lis[i].addEventListener('click', function() {
   orderedPizzaHTML = "<li>" + lis[i] + "</li>";
   $('#orderedPizzaList').html(orderedPizzaHTML);
  });
}

my DOM looks like this, that is where i want insert my selected pizza: 

<div class="box orderedPizzaList" > 
   <h3 class="pizzaTitle">Choosed Items: </h3>
    <ul id="orderedPizzaList">

    </ul>
</div>
Mikhailo Rozumovskyy
Mikhailo Rozumovskyy
3,779 Points
Mikhailo Rozumovskyy
Mikhailo Rozumovskyy
3,779 Points

Patrik! I think that is what i want, when i come home, i will try it.

Mikhailo Rozumovskyy
Mikhailo Rozumovskyy
3,779 Points
Mikhailo Rozumovskyy
Mikhailo Rozumovskyy
3,779 Points

Such a good solution also! Thank you Kieran! I will try it in my next programming session! ???

Mikhailo Rozumovskyy
Mikhailo Rozumovskyy
3,779 Points
Mikhailo Rozumovskyy
Mikhailo Rozumovskyy
3,779 Points

UPDATED. Guys, I just tasted it, and I can perfectly run your code IN CASE when <ul> is created directly in the HTML file, but when I add it from json file, I cannot traverse the dom and manipulate elements.

Mikhailo Rozumovskyy
Mikhailo Rozumovskyy
3,779 Points
Mikhailo Rozumovskyy
Mikhailo Rozumovskyy
3,779 Points

new question is there: https://teamtreehouse.com/community/json-and-dom-traversing-problems