Today I want to cover parent/child/sibling relationships and how jQuery can be very effective here. I spent a while trying to figure this out in javascript, and yes, it is completely do-able in just a little more code, but jQuery always has the UI plugins that make coding super easy. Let me show you some code I currently have:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$('div').each(function (){ 
   if($(this).is('#rows')) {
      $(this).hover(
         function() { $(this).addClass('rows-add-class'); }, 
         function() { $(this).removeClass('rows-add-class'); }
      );
      $(this).children('.section2, .section3, .section4, .section5').click(function(){
         window.location.href="viewClient.php?id="+$(this).siblings('.small').children('#cb').val();
      });
      $(this).children('.section1').click(function(){
         if($(this).siblings('.small').children('#cb').attr('checked'))
            $(this).siblings('.small').children('#cb').attr('checked',false);
         else
            $(this).siblings('.small').children('#cb').attr('checked',true);
      });
   }
});

I know this looks complicated, but lets break it down line by line.

1. $('div').each(function (){

This code goes through each <div> in my code, and with each <div> it finds, it executes a function, which is the remainder of the code.

2. if($(this).is('#rows')) {

So when it finds a

, it checks to see if the <div> that was found “is” (or has the property of) ‘#rows’. The # in the front means the <div> id. If there is a “.” in front, it means the <div> class. If there is nothing, then it means that it is a tag itself. So when it finds the div tag with the id=”rows”, it will execute the following code.

$(this).hover(

Simply, it adds a hover class to the div with the id=”rows”. When you add a hover, you need to have it do 2 things, mouseover and mouseout. So the next parts of the code describe mouseover and mouseout respectively.

function() { $(this).addClass('rows-add-class'); },

So on mouseover, it will execute this function, which is, it will add a class called ‘rows-add-class’ to the div we have selected. Note the “,” at the end, which means that this is the next line is also part of hover().

function() { $(this).removeClass('rows-add-class'); }

On mouseout, it will remove the class. We could have it add another class or give us an alert if we wanted, but typically when you hover over something with the mouse, you want to emphasize/change something, and when you move it out, you want it to return to normal.

);

So finally we start closing stuff up. This closes up the hover statement.

$(this).children('.section2, .section3, .section4, .section5').click(function(){

Here we are getting into children. If you have a div, and inside that div, you have multiple other divs, you may want to do something to those divs. What I am doing here is adding an “onclick” function to the children divs with classes “section2″, “section3″, “section4″, “section5″. Notice how here I used ‘.section1, etc’, the “.” signifies classes. So this is statement, I am adding an “onclick” to the child tags under &ltldiv id=”rows”>. The next line will tell me what exactly I am going to do when I click on one of those 4 child divs.

window.location.href= "viewClient.php?id="+$(this).siblings('.small').children('#cb').val();

Wow, thats a long line of code! window.location.href= is a redirect, so basically, when you click the divs, it will act like a link and take you somewhere else. It looks like it will take you to a viewClient.php page with the id= whatever $(this).siblings(‘.small’).children(‘#cb’).val(); equals. It gets a little confusing here. So <div id=”rows”> is set up with a few children tags, and those children have a few tags. All of the children are siblings. So if I was to click on one of the children, say one with the class “section2″, I want to find out info about his sibling, with the class “small”. Now “small” has a child with the id=”cb”. Cb stands for check box. Basically, when you click on the div, it will find its sibling’s, child’s value, which is the ID # we are looking for. At the bottom of the page you can see the layout of the div with children and grandchildren. So to recap, this line redirects us to “viewClient.php?id=1″.
Why did I do this? Well I am pulling data out of a database, and I don’t want to make a link in every div so they have to click on the words to be redirected. These couple lines of code make it much easier for the user to redirect to the page they want.

});

Just closing up the “onclick” that we added to those 4 divs.

$(this).children('.section1').click(function(){

Here is the div with class=”section1″ and we are adding a different “onclick” function to it. Let’s see what we want it to do.

if($(this).siblings('.small').children('#cb').attr('checked'))

This looks similar to line 8 where we locate the sibling with the class=”small” and the child it has with the id=”cb”. So we are locating our checkbox. If our checkbox is checked (.attr(‘checked’) returns true if checked, false if not checked), we are going to do something. That was pretty easy now that siblings and children make a little sense.

$(this).siblings('.small').children('#cb').attr('checked',false);

Ok, so if it was checked, all this will do is set ‘checked’ to false, meaning it will un-check the check box.

else

If it wasn’t checked, then what.

$(this).siblings('.small').children('#cb').attr('checked',true);

Well then, check it! So why did I add this code? Well just to add it really. It makes clicking the check box slightly easier. They can click on this div, and it will check/uncheck the checkbox for them.

The rest of the code simply closes up the function that I created. This is something I would have it do on start up, rather than allowing the user to click a button to enable these features.

This is the HTML markup that was used in the code. The classes are easily created and is something you can do on your own.

<div id="rows">
   <div class="small"><input type="checkbox" id="cb" value="1"></div>
   <div class="section1">1 (Clients ID)</div>
   <div class="section2">Bob (Clients Name)</div>
   <div class="section3">123 Fast Lane (Clients Address)</div>
   <div class="section4">12345 (Clients Zip)</div>
   <div class="section5">(123)555-1212 (Clients Phone)</div>
</div>

Pretty simple layout causes pretty intense code. Hopefully my explanation shows you some of what jQuery can do for you and provides a plan of attack for you. If you want any help, let me know and I will be willing to explain something, review your code, etc.