Ignite - jQuery Selectors Demo

by cburriss

HTML

<div id="outerDiv" name="outerDiv" class="divClass1">
    <div id="innerDiv1">
        <input class="inputClass1" type="text" id="input1" />
        <input class="inputClass2" type="text" id="input2" />
    </div>
    <div id="innerDiv2">
        <input class="inputClass1" type="text" id="input3" />
        <input class="inputClass2" type="text" id="input4" />
    </div>
    <input class="inputClass3" type="text" id="input5" />
</div>
<input class="inputClass3" type="text" id="input6" />

CSS

div, input {
    display: none;
}

JavaScript

$(document).ready(function() {

    var byId = $("#input100");        
    var byClass = $(".inputClass2");
    var byTag = $("input");    
    var byChild = $("div > div > .inputClass1");   
    var byDescendant = $("div input");   
    var byAttribute = $("div[name='outerDiv'], *[id^='input'], *[id$='1']"); 
    var eq = $("input:eq(1)");
    
    PrintInfo("#input1", byId);
    PrintInfo(".inputClass2", byClass);
    PrintInfo("input", byTag);
    PrintInfo("div > div > .inputClass1", byChild);
    PrintInfo("div input", byDescendant);
    PrintInfo("div[name='outerDiv'], *[id^='input'], *[id$='1']", byAttribute);
    PrintInfo("2nd element of input tags", eq);
});

function PrintInfo(selector, elements) {
    
    var body = $('body');
    
    body.append("'" + selector + "' returned " + elements.length + " elements: ");
    
    if (elements.length > 0) {
        
        var ids = "";
    
        elements.each(function(idx) {
            ids += $(this).attr('id');
            
             if (idx < elements.length - 1)
                 ids += ", ";
        });
        
        body.append(ids);
    }
    else {
        body.append("[nada]");   
    }
        
    body.append("<br /><br />");
}