jQuery selection filtering

by anandhinava

HTML

<h1 class="bar">jQuery selection filtering</h1>
<h1 class="bar1">My work</h1>

<div class="foo">no paragraph</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");
console.log($items.filter(".current")); // unordered list items with class of current
console.log($items.first()); // just the first unordered list item
var $previous = $items.eq(1).text();

console.log($("ul li").filter(".current").css("color","red"));
console.log($("ul li").filter(".current").text("Anandhi"));
$('h1').not(".bar1").css('color', 'red');

var $divFoo = $("div.foo").has("p");

$divFoo.css("color","green").text("Yes I do have a paragraph");
$divFoo.append('<p>has paragraph</p>');

$items.eq(1).text($previous);