JQuery sibling child concept with live demo

JQuery sibling child concept with live demo

JQuery sibling child concept is another very important aspect of JQuery coding. Developers often use this JQuery sibling child traversal while hooking into DOM elements for event capturing.

In this article, I will give a complete picture to you on how we can implement the JQuery sibling child syntaxes while using DOM elements in JQuery and binding their events with our custom code.

Learning the HTML DOM concept

The very basic concept is really simple.

Concept 1: You consider your HTML document as a tree of HTML elements placed one after the other, inside the other and this continues.

You get a structure for your webpage. That is only possible when you segregate the elements into groups and systematic blocks.

Concept 2: Without the structural approach, a webpage would just be a collection of odd elements sitting just anywhere all over the browser page.

The hierarchy is important because we need a proper built website. We need a design that must be looking good.

Concept 3: So, here is when we step into the concept of the DOM – the document object modelling.

The DOM is a term used by web developers and designers where they consider the elements individually in an HTML page.

The DOM is the key of traversing through an HTML page and catching hold of the individual elements. JQuery sibling child concept is purely based on this.

Concept 4: JQuery sibling child are JQuery library functions which track down individual DOM elements, and then we can do whatever manipulation we want.

JQuery sibling child usage guide

JQuery sibling child functions are very easy to use.

The starting point: You just need a starting point for traversing the DOM or binding an event.

By starting point, I mean, you must have one DOM element selected or point selected in the HTML tree.

This point will be where we start from, so will behave like the “parent” or “child” or “sibling” to all other elements.

That’s the magic! You get hold of any element by its ID or CLASS selector, and then off you go! You can traverse any way you want.

The next step: Once this point selection is done, we will start using the functions right away. There is one more function in JQuery other than the JQuery sibling child; and that’s – parent.  

So, just have a look at the following code. These are the basic usage patterns of the JQuery sibling child or parent functions –

/* 
In the below code, we are creating the starting point as "DIV" element
So, for all "P" elements that are directly coming under a "DIV" element,
in the whole HTML file; the borders will be updated.
 */
$('div').children('p').css('border','1px solid red');

/* 
For parent and sibling, the process is the same.
*/
$('p').parent('div').css('border','1px solid red');
$('input').siblings('input').css('border','1px solid red');

JQuery sibling child and parent – where do I use them?

This is one pertinent and valid question. I already have HTML and CSS selectors – the ids, classes and elements tags itself. Why do I need this JQuery sibling child or parent stuff?

Well, in some situations, there arises the need for these tags.

Imagine a scenario, where you need to validate multiple form input fields in the frontend to check whether they have values in it or not.

By the way, now you can also validate form values from backend database data – like checking username availability and validating it with existing records.

You must validate all fields and not submit it to your server until then. So, if this be your situation, how would you do it?

Your answer is straight. I do not need JQuery sibling child and parent stuff for that! I have classes. I can track all input elements tags with the class name and generate the event using that itself.

Exactly so! But what if there is a span element just beside each input field. It denotes whether the field is successfully validated or not.

Now, for each input, you need to give separate signs according to its validation results. Would you be able to do that without JQuery sibling child concepts? I am afraid to say, but no.

Our utility point: So, the above mentioned situation is where you would need the JQuery sibling function to track the exact corresponding span element each time an input field is getting validated.

Same goes for the JQuery children and parent function. Suppose the input tags contain the validation marker inside them (in the form of an image, maybe). So, in order to activate that particular image where an input field gets validated, the children function gets handy (because the image tag will now be a child of the input field tag).

So, below is a code of a perfect tracking mechanism using JQuery sibling child and parent concept. Also, a demo link is present with this article that shows the working of the below code.

The demo is very intuitive and would give a great understanding of the DOM traversal and JQuery sibling child and parent concept.

            <div class="main">
                <ul>
                        <li><input type="text" class="inputs blur" name="name"/></li>
                        <li><input type="password" class="inputs blur" name="password"/></li>
                        <li><input type="text" class="inputs blur" name="email"/></li>
                </ul>                
            </div>
            
            <div class="main">
                <label class="red">Border red is for the child element</label><br/>
                <label class="blue">Border blue is for the parent to the red element</label><br/>
                <label class="green">Border green is for the sibling to the blue element</label>
            </div>
$('.inputs').each(function(){
       var value = "Enter "+$(this).attr('name');
       $(this).val(value);
   });
      
   $('.inputs').each(function(){
       $(this).focus(function(){
           $(this).val('');
           $(this).css('border','1px solid red');
           $(this).parent().css('border','1px solid blue');
           $(this).parent().siblings().css('border','1px solid yellowgreen');
       });
       $(this).blur(function(){
           var value = "Enter "+$(this).attr('name');
           $(this).val(value);
           $(this).parent().css('border','0');
           $(this).addClass('blur');
           $(this).css('border','1px solid #ddd');
       });
   });