Article

Introduction

https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js
Copy to clipboard

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

<script>
$(document).ready(function(){
  XT1
});
</script>
Copy to clipboard
Send to Live Demo

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>

<script>    
$(document).ready(function() {
  XT1
});
</script>
<script>
  
</script>
Copy to clipboard
Press the Run Demo button to execute the scripts above.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Your browser is too small

Resize your browser to be at least 769px wide.