Introduction
Arrays come in handy when you want to store multiple pieces of related information together e.g. names of classes, names of headings or items in a webflow list. To define an array we can write: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/arrays/ex1.js?actionable=false Here our array name is colours and it holds a list of color names. To access any item in the array, we refer to it by its position / index in the array. For example to get the value of the first item in the array we do: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/arrays/ex2.js?actionable=true Because JavaScript starts counting from 0 the first item in our array is denoted as colours[0]. Likewise the last item on our array can be accessed with colours[2].To add an item to an array use the push() function: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/arrays/ex3.js?actionable=true The code above will add an element black to the end of the array.To an item to the beginning of the array we use the function unshift() instead. https://raw.githubusercontent.com/finsweet/jqueryCourse/main/arrays/ex4.js?actionable=true If you need to delete an item from the start or end an array use shift() and pop() respectively: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/arrays/ex5.js?actionable=true Here is how to use shift() https://raw.githubusercontent.com/finsweet/jqueryCourse/main/arrays/ex6.js?actionable=true
$(document).ready(function(){
XT1
});
</script>
Live demo
<div id="minidivpage" class="example-live"><h4 class="heading-4">Names in a webflow list:</h4><ul role="list" class="list"><li>Peter</li><li>John</li><li>Brian</li><li>George</li></ul></div>
$(document).ready(function() {
XT1
});
</script>