Jquery Examples

MAP
$.map([10,20,30], function(n,i) { return n+i;});   //[10, 21, 32]

Jquery Reverse Order of  Child Elements (ul & li):
var list = $('ul');
var listItems = list.children('li');
list.append(listItems.get().reverse());

$('ul li')[0]                       //<li>AAA</li>
$('ul li')[0].innerHTML  //AAA


$("ul li").eq(7).css("border", "1px solid #000000");  //Applies style to 8th element

Apply Style to Even & Odd rows:
$("ul  li:even").addClass("even");
$("ul  li:odd").addClass("odd");
(or)

$("ul li").each(function(i) {
if (i % 2 == 1)
{
    $(this).addClass("odd");    //$(this).css("background-color", 'red')
}
else
{
    $(this).addClass("even");   //$(this).css("background-color", 'yellow')
}
});

if ($('#elem').is(':hidden')) {
   // Do something conditionally
}

$('p:visible').hide();  // Hiding only elements that are currently visible
$('ul').siblings().length   //Siblings of <ul> element

To Get Immediate Children
<a href="/category">Category</a>
<ul id="nav">
<li><a href="#anchor1">Anchor 1</a></li>
<li><a href="#anchor2">Anchor 2</a></li>
<li><span><a href="#anchor3">Anchor 3</a></span></li>
</ul>

$('li > a').length => 2 (only in immediate direct children)
$('li a').length => 3 (all anchor tags )

$('li').children()
or
$('li > *')
or
$('li').find('> *')

Stop Event Bubbling:
return false; => event.stopPropagation(); + event.preventDefault();
event.stopImmediatePropagation(); => stops immediately without executing handlers of same element.
event.stopPropagation(); => stops executing handlers of parent elements, but executes that of same element

end()
You can return to the previous set of DOM elements that were selected before using a destructive method.

   <p>text 1 </p>
    <p class="test_class">text 2
        <span>AAA</span>
    </p>
    <p>text 3 </p>
   
    <script type="text/JavaScript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/JavaScript">
        console.log($('p').filter('.test_class').length); // 1
        console.log($('p').filter('.test_class').end().length); // 3
        console.log($('p').filter('.test_class').find('span').end().end().length); // 3
    </script>

filter() vs find()
find() will operates the children of the current set
filter() will only operate on the current set of elements.

On the same level: (FILTER)
$('div').filter('.x').length
or
$('div.x').text()

Inner level search (FIND)
$('div').find('.x').length
or
$('div .x').text()

Jquery - Save File:
$('#ajax-loader').show();
            $.post("/test/return/data/", snddata,
                  function callbackHandler(data, textstatus){
                    $('#ajax-loader').hide();
                    if(data.status == 1){
                        str = data.encrypted_data
                        saveData(str, "download_file_name")
                    }
                    else{
                       alert(data.msg);
                    }
                 },
                 "json"
            );

var saveData = (function () {
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.style = "display: none";
        return function (data, fileName) {
            var json = data,
                blob = new Blob([json], {type: "octet/stream"}),
                url = window.URL.createObjectURL(blob);
            a.href = url;
            a.download = fileName;
            a.click();
            window.URL.revokeObjectURL(url);
        };
      }());


&amp issues while passing from template to server
str = ''
document.location = '/test/url/' + encodeURIComponent(str);

!important
!important (It will override the CSS definition in header classes)
<style type="text/css">
   .bst_popover{
     max-width: 500px !important;
   }
</style>

Choose a specific parent
$(this).parents("tr:first");
$(this).closest("tr");