javascript - 无法使用 $(this) 时定位单个元素

Question

function modalClosed(){
    $("div#tab" + tabId).find('ul')
                        .prepend("<li>item</li>")
                        .hide()
                        .fadeIn('slow');
}

我希望将列表（<li>）添加到前面并逐渐淡入淡出，不幸的是我没有办法使用$(this)，上面的代码效果不好，它对所有的<li>.

Answer 1

那是因为.prepend()返回ul元素而不是附加li元素，所以你隐藏/显示ul元素。prependTo()您现在可以使用方法反转逻辑，.hide()并将.fadeIn()其应用于附加元素而不是ul元素。

$("<li>item</li>").hide()
                  .prependTo("#tab"+tabId+" ul")
                  .fadeIn('slow');

http://jsfiddle.net/5yj7v/

Answer 2

function modalClosed(num) {
     $("div#tab" + tabId).find('ul')
                        .prepend("<li>item</li>")
                        .hide()
                        .fadeIn('slow', function() {
                            // callback function, called when fadeIn has finished
                            if(num > 1) {
                                modalClosed(num - 1);
                            }
                        });
}

Answer 3

据我了解，您希望在所有 li 项目上一一淡入效果。如果正确，请尝试以下操作：

var time=1000;
$("div#tab"+tabId+" ul").prepend("<li>item</li>");
$("div#tab"+tabId+" ul li").each(function() {
    $(this).hide();
    $(this).fadeIn(time);
    time+= 800;
});

http://jsfiddle.net/PV4dC/5/