How to populate an array with HTML elements

Question

So i want to make a content slider. I have 8 LI elements and want to make an array with those elements. So far i have done that by adding a unique ID or Name to each of them and making a variable with that element, but i believe that there is a better way of doing this, i just dont know it because i am a designer, not a developer. Code: In HTML

        <ul>
            <li>
                <img src="../images2/c++.png" />
                <h2>C++ for absolute begginers</h2>

                <h3>John Purcell</h3>
            </li>
            <li>
                <img src="../images2/JS.jpg" />
                <h2>JavaScript From Scratch</h2>

                <h3>Derek Banas</h3>
            </li>
            <li>
                <img src="../images2/cSharp.png" />
                <h2>C# From Begginer To Advanced</h2>

                <h3>Derek Banas</h3>
            </li>
            <li>
                <img src="../images2/PHP.png" />
                <h2>PhP and MySQL For Beginners</h2>

                <h3>Derek Banas</h3>
            </li>
            <li>
                <img src="../images2/c++.png" />
                <h2>C++ for absolute begginers</h2>

                <h3>John Purcell</h3>
            </li>
            <li>
                <img src="../images2/JS.jpg" />
                <h2>JavaScript From Scratch</h2>

                <h3>Derek Banas</h3>
            </li>
            <li>
                <img src="../images2/cSharp.png" />
                <h2>C# From Begginer To Advanced</h2>

                <h3>Derek Banas</h3>
            </li>
            <li>
                <img src="../images2/PHP.png" />
                <h2>PhP and MySQL For Beginners</h2>

                <h3>Derek Banas</h3>
            </li>
        </ul>

Answer 1

Add the shared class to each li element like below:

  <ul>
        <li class="myLiShared">
            <img src="../images2/c++.png" />
            <h2>C++ for absolute begginers</h2>

            <h3>John Purcell</h3>
        </li>
        <li class="myLiShared">
            <img src="../images2/JS.jpg" />
            <h2>JavaScript From Scratch</h2>

            <h3>Derek Banas</h3>
        </li>
        <li class="myLiShared">
            <img src="../images2/cSharp.png" />
            <h2>C# From Begginer To Advanced</h2>

            <h3>Derek Banas</h3>
        </li>
        <li class="myLiShared">
            <img src="../images2/PHP.png" />
            <h2>PhP and MySQL For Beginners</h2>

            <h3>Derek Banas</h3>
        </li>
        <li class="myLiShared">
            <img src="../images2/c++.png" />
            <h2>C++ for absolute begginers</h2>

            <h3>John Purcell</h3>
        </li>
        <li class="myLiShared">
            <img src="../images2/JS.jpg" />
            <h2>JavaScript From Scratch</h2>

            <h3>Derek Banas</h3>
        </li>
        <li class="myLiShared">
            <img src="../images2/cSharp.png" />
            <h2>C# From Begginer To Advanced</h2>

            <h3>Derek Banas</h3>
        </li>
        <li class="myLiShared">
            <img src="../images2/PHP.png" />
            <h2>PhP and MySQL For Beginners</h2>

            <h3>Derek Banas</h3>
        </li>
    </ul>

Then in your javascript code you can get the li elements as an htmlcollection like so:

let myCollection = document.getElementsByClassName("myLiShared");
//Now you can iterate over your li elements like so
for(let x = 0; x < myCollection.length; x++){
     //Do something with your li element
     //myCollection[x]
}

Answer 2

This really depends the surrounding code. You can just add a class to each li and use $('.className').toArray(); or if this is your only list, you could even use $('li').toArray(); .

For vanilla javascript, you can use document.querySelectorAll('.className'); or document.querySelectorAll('li');

Answer 3

You can get a NodeList of your elements which is similar to an array by using querySelectorAll . If you were to add a class such as list to your ul, you could get them like this:

var items = document.querySelectorAll('.list li')

A NodeList can do some things an array can do. If you need to change it to an array like this:

var itemsArray = [].slice.call(document.querySelectorAll(".list li"));

Answer 4

jQuery alternative

• Apply a class to your ul element and execute this selector .classname li .
• To populate those elements into an array, call the native jQuery function toArray()

Look at this code snippet

 var array = $('.list li').toArray(); console.log(array); 

 .list { display: none } .as-console-wrapper { max-height: 100% !important } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><ul class='list'> <li> <img src="../images2/c++.png" /> <h2>C++ for absolute begginers</h2> <h3>John Purcell</h3> </li> <li> <img src="../images2/JS.jpg" /> <h2>JavaScript From Scratch</h2> <h3>Derek Banas</h3> </li> <li> <img src="../images2/cSharp.png" /> <h2>C# From Begginer To Advanced</h2> <h3>Derek Banas</h3> </li> <li> <img src="../images2/PHP.png" /> <h2>PhP and MySQL For Beginners</h2> <h3>Derek Banas</h3> </li> <li> <img src="../images2/c++.png" /> <h2>C++ for absolute begginers</h2> <h3>John Purcell</h3> </li> <li> <img src="../images2/JS.jpg" /> <h2>JavaScript From Scratch</h2> <h3>Derek Banas</h3> </li> <li> <img src="../images2/cSharp.png" /> <h2>C# From Begginer To Advanced</h2> <h3>Derek Banas</h3> </li> <li> <img src="../images2/PHP.png" /> <h2>PhP and MySQL For Beginners</h2> <h3>Derek Banas</h3> </li></ul> 

See? the li elements were populated into an array.

Resource

• .toArray()