jQuery tips and tricks

1. How to judge element is visible ?

    if($(".nav").is(":visible")) {
        // This element is visible
    }

This filter is very power, for example:

    <div >
    <div id="test">This element is hidden.
    </div>

    if ($("#test").is(":hidden")) {
        alert("this element is hidden"); // execute
    }

Inside the jQuery, it use offsetWidth and offsetHeight to judge whether an element
is visible, not through CSS properties visibility or display:

    Sizzle.selectors.filters.visible = function(elem){
	    return elem.offsetWidth > 0 || elem.offsetHeight > 0;
    };

2. Scroll to an element

    // This example doesn't work properly
    var eleTop = $("#p2").offset().top;
    $("body").scrollTop(eleTop);

OK, it’s a trick that we must set selecter to “html, body”:

    // Works well
    var eleTop = $("#p2").offset().top;
    $("html, body").scrollTop(eleTop);

Add some animations:

    var eleTop = $("#p2").offset().top;
    $("html, body").animate({
        "scrollTop": eleTop
    }, "slow");

3. Another way to find the index of an element within a set

In the previous
article, I use the jQuery index method to achieve this.

Below are some other ways:

    <ul class="menu">
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
    </ul>

    // Previous method
    var lis = $("ul.menu li").click(function() {
        lis.index(this); // "menu 3" -> 2
    });

    // Method 1
    var lis = $("ul.menu li").click(function() {
        alert($(this).prevAll().length); // "menu 3" -> 2
    });

    // Method 2
    var lis = $("ul.menu li").click(function() {
        alert(lis.length - $(this).nextAll().length - 1);
    });

    // Method 3
    var lis = $("ul.menu li").click(function() {
        alert($.inArray(this, lis));
    });

4. Loop in a graceful way - $.each

We may loop through object or array like this:

    var obj = {
        "name": "zhangsan",
        "sex": "man",
        "age": 21
    };
    for (var i in obj) {
        console.log("key:" + i + " value:" + obj[i]);
    } 

    var arr = ["zhangsan", "lisi", "wanger"];
    for (var i = 0; i < arr.length; i++) {
        console.log("index:" + i + " value:" + arr[i]);
    }

Now, with jQuery:

    // key:name value:zhangsan
    // key:sex value:man
    // key:age value:21
    $.each(obj, function(i, item) {
        console.log("key:" + i + " value:" + item);
    }); 

    // index:0 value:zhangsan
    // index:1 value:lisi
    // index:2 value:wanger
    $.each(arr, function(i, item) {
        console.log("index:" + i + " value:" + item);
    });

4. Return false to prevent default and stop propagation

    <div id="link2">
        <a href="http://www.google.com/" mce_href="http://www.google.com/">Go to Google</a>
    </div>

    $("#link1").click(function(event) {
        alert("click link1.");
    });

    // 1. Only prevent default action of hyperlink, the alert dialog is showing.
    $("#link1 a").click(function(event) {
        event.preventDefault();
    });

    // 2. No alert dialog shows
    $("#link1 a").click(function(event) {
        event.preventDefault();
        event.stopPropagation();
    });

    // 3. This is the same as previous code
    $("#link1 a").click(function(event) {
        return false;
    });