CODEWITHSUNDEEP
jquery
luckyluke
luckyluke

Reputation: 654

end() method in jquery works but exhibits strange behaviour

Below is the HTML Code

<div id="Parent">
            This is Parent Div
             <p> This is first child.</p>
             <p> This is second child.</p>
             <p> This is Third child.</p>
        </div>

<input type="button" id="clickme" value ="click me" />

and here is jQuery code

$('#clickme').click(function() {
    $('#Parent')
    .children() // 1st phase action on children begins here
    .css('color', 'blue')
    .end() //Here 1st phase action on children ends 
    .css({
        'color': 'red',
        'border-color': 'blue',
        'border-width': '3px',
        'border-style': 'solid'
    }) // Here 1st phase action on Parent completed
   .children() //2nd phase action on children begins
   .css({
        'border-color': 'red',
        'border-width': '2px',
        'border-style': 'solid'
    }).end() // 2nd phase action on children ends
    .css('font-style', 'italic'); //2nd phase action on parent begin/ends
});​

In the above jquery code i'm trying to apply different styles to children and parent. Everything works fine except the italics style. Can anyone explain me why this strange thing happens.

sorry missed this - i'm applying italics to parent but the children also gets changed. how to prevent this?

Upvotes: 0

Views: 60

Answers (1)

charlietfl
charlietfl

Reputation: 171669

Bouncing back and forth between parent and children to set different css makes little sense.

Just combine the css properties for parent, and properties for children and only make one css call for each. It takes the confusion of using end() out of the picture and is more efficient and easier to read.

$('#clickme').click(function() {
    $('#Parent')   
    .css({
        'font-style': 'italic',
        'color': 'red',
        'border-color': 'blue',
        'border-width': '3px',
        'border-style': 'solid'
    })
   .children()
   .css({
       'color':'blue',
        'border-color': 'red',
        'border-width': '2px',
        'border-style': 'solid'
    })
});

DEMO: http://jsfiddle.net/T9zBS/

I suspect you are expecting the italic only on the text in the parent, in which case it will be now obvious that you would need to set children to normal font as well.

Upvotes: 1

Related Questions