jQuery selection filtering

by vijayram_a

HTML

<h1 class="bar">jQuery selection filtering</h1>

<div class="foo">no paragraph

<p>has paragraph</p></div>
<div class="foo">
    <p>has paragraph</p>
</div>
<ul>
    <li>first</li>
    <li class="current">second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
</ul>

JavaScript

// Refining selections.
console.log($("div.foo").has("p")); // div.foo elements that contain <p> tags
console.log($("h1").not(".bar")); // h1 elements that don't have a class of bar
var $items = $("ul li"); //match ALL li in ul
//$("ul > li"); //match only li that are direct child of ul
console.log($items.filter(".current")); // unordered list items with class of current
console.log($items.first()); // just the first unordered list item
console.log($items.eq(5));

var $abc = $("div p");
console.log($abc.css('font-weight','bold'));
console.log($abc.add("span"));

console.log($("div").append('<span id="new">new paragraph</span>'));