Starting with jQuery - Part 3

Click here to download example file

- How to iterate over html nodes:

jQuery provides us with an each function - that can be used to iterate over any collection, whether it's an object or a simple array. It iterates over DOM elements and passes current loop iteration starting with 0.

.each(function(index, Element))

There are two ways to iterate over the elements:

1.
 $('div').each(function(index){
         alert(index + '=' +$(this).text());
}

OR

2.
 $('div').each(function(index, elem){
     alert(index + '=' +$(elem).text());}

They both accomplish the same thing, the first one uses $(this), basically passing DOM element to jQuery so this refers to the current element.


-  How to modify DOM:

this.property, so to iterate through each div in the DOM tree and update the author node:

$('div').each(function(i){   this.author = "index= " + i;});

Note: There's a difference between $(this) and this:
1. $(this) - represents the jQuery object.
2. this - represents the raw javascript (DOM) object.

- How to modify attributes:

We can grab the author attribute using:

var result = $('#SomeDiv').attr('author');

If we want to modify the value of object's attributes:

$("button").click(function(){
  $("img").attr("height","50");});

$('div.FirstDiv,div.SecondDiv').each(function(index){
   this.title = 'New Title';});

OR:

 $('div.FirstDiv,div.SecondDiv').each(function(index){
     $(this).attr("title", 'New Title'); });

The first example uses raw DOM javascript object (this.title), the second example, while accomplishing the same thing, uses jQuery object and accesses title via jQuery API.

Mousing over reveals the title:

Now, if we want to update multiple values (title, style, etc.) or attributes then we can harness the power of JSON (JavaScript Object Notation) 

$('img').attr({
  alt: 'Richard Feynman',
  width: '400',
 style: 'border: 1px solid red;'
});

jQuery supports what's called a map - which is basically a JSON object with properties.

Note: the attributes above need to match the <img> attributes. 

JSON object is essentially an unordered collection of name/value pairs, self describing, easy to understand AND much faster to parse than XML - and yes, it is language independent.

The first object is delimited by the outside brackets {FirstName, LastName} - then inside we have another object that is part of the outside object - nested object with the Address:
{
 FirstName:'Jeane',
 LastName:'Waterman',
  Address:
  {
     Street: '123 Nice St.',
     City: 'Chicago',
     State: 'IL',
     Zip: 60606
  }
}

You can do arrays: (the square bracket represents an array)
{
 "employees": 
   [
    { "FirstName":"Jeane" , "LastName":"Waterman" }, 
    { "FirstName":"Dania" , "LastName":"Dates" }, 
    { "FirstName":"Tamie" , "LastName":"Rost" }
  ]
}



  $('div.SecondDiv').attr(
  {
    title: "Yet Another Title",
    style: 'font-size: 20pt; background-color:green;' 
   });

OR

 $('div.SecondDiv')
    .attr(
            {
              title: 'Yet Another Title'
            }
           )
     .css('background-color','green')
     .css('title','Yet Another Title')
     .css('font-size', '20pt');


The second example uses chaining of the jQuery properties.

- How Insert and Remove Nodes:

1. append() - insert content to the end of element.

2. appendTo() - insert element to the end of the target.

3. prepend() - insert content to the beginning of element.

4. prependTo() - insert element to the beginning of the target.

5. remove() - remove elements from the DOM.

$('#FirstTableDiv')

.append('<span style="background-color:steelblue">appended Child 1 Blue</span>');  

$('#FirstTableDiv')

.prepend('<span style="background-color:steelblue">prepended Child 2 Blue</span>'); 

To remove some rows from the table:

$('tbody.RowsToRemove').remove();  

results in:

    

Click here to download example file.