Ignite - jQuery Traversal

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 body = $("body");
    
    var forEach = $("input[id^='input']");
    
    body.append("From each function: <br />");
    
    forEach.each(function(idx) {
        
        var elemFromIteration = $(this);
        body.append("[" + idx + "]: " + elemFromIteration.attr("id") + "<br />");
        
        if (idx == forEach.length - 1)
            body.append("<br />");
    });
 
    var viaFind = $("#outerDiv").find("input");
    
    var firstOfViaFind = viaFind.first();
    
    var lastOfViaFind = viaFind.last();
    
    var nextElemAfterFirstDivInput = $("#outerDiv input").first().next();
    
    var previousElemBeforeLastDivInput = $("#outerDiv input").last().prev();
    
    var parent = $("#input4").parent();
    
    var closest = $("#input2").closest("div.divClass1");
    
    PrintInfo("found inputs within outerDiv", viaFind);
    PrintInfo("first input within outerDiv", firstOfViaFind);
    PrintInfo("last input within outerDiv", lastOfViaFind);
    PrintInfo("element after first input within outerDiv", nextElemAfterFirstDivInput);
    PrintInfo("element before last input within outerDiv", previousElemBeforeLastDivInput);
    PrintInfo("parent of input4", parent);
    PrintInfo("closest div of input2 with class divClass1", closest);
});

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 />");
}