Question

我已经阅读了各种关于检查div是否有滚动条以及我的代码是否有效的帖子。如果滚动条存在，我需要做的是向div添加一个类，但不必为每个div编写代码。如果我使用类或ID专门命名div，那么代码可以工作，但是我需要一种方法来使用'this'来实现它。

这是我的代码：

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.innerHeight();
    }
})(jQuery);

$(function(){

if ($('div').hasScrollBar()){
    var scrollObj = $(this);
    scrollObj.addClass('scrollable');
}

});

Answer 1

使用each循环浏览div，这将为您提供正确的this。

Answer 2

你可以这样做：

$("div").each(function() {
   if( $(this).hasScrollBar() ) {
      $(this).addClass('scrollable');
   }
});

Answer 3

选项1

我想你只想要each方法：

$("div").each(function() {
    if($(this).hasScrollBar()) {
        $(this).addClass('scrollable');
    }
});

选项2

但如果你想要聪明，你也可以用filter：

来做

$('div').filter(function() { 
    return $(this).hasScrollBar(); 
}).addClass('scrollable');

演示jsFiddle：http://jsfiddle.net/Cg3bv/

选项3

如果你想更聪明，你可以使用hasScrollBar本身作为过滤回调：

$('div').filter($.fn.hasScrollBar).addClass('scrollable');

但这需要稍微改变hasScrollbar：

$.fn.hasScrollBar = function() {
    return $(this).get(0).scrollHeight > $(this).innerHeight();
}

我认为你应该这样做。使this原始DOM元素和$(this)包装的jQuery对象是通常的模式，而不是假设this将永远是$ - 已经包装。此外，如果你将它包装两次（即意外地在已经是JQ对象的东西上调用$），将会有一些性能开销，但它不会完全破坏。试图在原始DOM对象上调用JQ方法只会失败。

演示jsFiddle：http://jsfiddle.net/Qd2ZC/

如果存在滚动条，则将类添加到$（this）div

3 个答案:

选项1

选项2

选项3