Prevent click event on certain child element

Prevent click event on certain child element using jQuery. Link: http://jquerytipsntricks.wordpress.com/

by Akram kamal

HTML

<h1>Prevent click event on certain child element</h1>

<hr/>

<h2>Demo #2</h2>

<em>Please click on the child elements</em>

<br/><br/><br/>
<div id="parent"> 
    <span id="one">Child One</span>
    <span id="two">Child Two</span>
    <span id="three">Child Three</span>
    <span id="four">Child Four</span>
</div>

CSS

body {
    font-family:"Segoe UI", "Verdana", "sans-serif";
    font-size: 70%;
}
#parent {
    padding:8px;
    margin:8px;
    border:2px solid #333;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -khtml-border-radius: 8px;
}
#parent > span {
    padding:5px 10px;
    margin:5px 10px;
    border:2px solid blue;
    display:inline-block;
}
.green {
    border:2px solid green !important;
    background-color:yellow;
}

JavaScript

// Bind an event handler to the "click" JavaScript event
$("#parent > span:not('#two')").click(function () {
    $(this).addClass('green').siblings().removeClass('green');
});

console.log('Child elements length: ' + $("#parent > span").length);
console.log('Child elements length: ' + $("#parent > span:not('#two')").length);