自动滚动多个Divs与表

Question

我要自动滚动Divs中有多个表。 我正在使用此代码段。

$(".divDetail").each(function(){

 var div = document.getElementById($(this).attr("id"));

   setInterval(function () {

            // make sure it's not at the    bottom
            if (div.scrollTop < div.scrollHeight - div.clientHeight)
                div.scrollTop += 2; // move down
            else
            { div.scrollTop = 0; }
        }, 100);  // 100 milliseconds

})

哪个有效，但是为什么这个选择器不起作用？

$(".divDetail").each(function(){

 var div = $(this);
   setInterval(function () {

            // make sure it's not at the    bottom
            if (div.scrollTop < div.scrollHeight - div.clientHeight)
                div.scrollTop += 2; // move down
            else
            { div.scrollTop = 0; }
        }, 100);  // 100 milliseconds

})

Jsfiddle这里和下面的代码段：

 var div = $("#tbl1"); setInterval(function() { // make sure it's not at the bottom if (div.scrollTop < div.scrollHeight - div.clientHeight) div.scrollTop += 2; // move down else { div.scrollTop = 0; } }, 100); // 100 milliseconds 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div id="tbl1" class="divDetail" style="overflow-y:auto; height:50px;"> <table class="table table-border"> <thead> <tr> <th>STORE</th> <th>PALLETS</th> <th>ZONE</th> <th>QTY</th> <th>item</th> </tr> </thead> <tbody> <tr> <td>123</td> <td>dkd</td> <td>123</td> <td>dkd</td> <td>dkd</td> </tr> <tr> <td>123</td> <td>dkd</td> <td>123</td> <td>dkd</td> <td>dkd</td> </tr> <tr> <td>123</td> <td>dkd</td> <td>123</td> <td>dkd</td> <td>dkd</td> </tr> <tr> <td>123</td> <td>dkd</td> <td>dkd</td> </tr> </tbody> </table> </div> 

Answer 1

在第一种情况下，变量div包含一个本机元素，在第二种情况下，它是一个jQuery对象，因此没有可用的相同属性/方法。 这将起作用。

$(".divDetail").each(function(){

 var div = $(this)[0];
   setInterval(function () {

            // make sure it's not at the    bottom
            if (div.scrollTop < div.scrollHeight - div.clientHeight)
                div.scrollTop += 2; // move down
            else
            { div.scrollTop = 0; }
        }, 100);  // 100 milliseconds

})

Answer 2

您需要像这样使用$(this)[0] ：

 var div = $("#tbl1")[0]; setInterval(function() { // make sure it's not at the bottom if (div.scrollTop < div.scrollHeight - div.clientHeight) div.scrollTop += 2; // move down else { div.scrollTop = 0; } }, 100); // 100 milliseconds 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tbl1" class="divDetail" style="overflow-y:auto; height:50px;"> <table class="table table-border"> <thead> <tr> <th>STORE</th> <th>PALLETS</th> <th>ZONE</th> <th>QTY</th> <th>item</th> </tr> </thead> <tbody> <tr> <td>123</td> <td>dkd</td> <td>123</td> <td>dkd</td> <td>dkd</td> </tr> <tr> <td>123</td> <td>dkd</td> <td>123</td> <td>dkd</td> <td>dkd</td> </tr> <tr> <td>123</td> <td>dkd</td> <td>123</td> <td>dkd</td> <td>dkd</td> </tr> <tr> <td>123</td> <td>dkd</td> <td>dkd</td> </tr> </tbody> </table> </div> 

更新的JSFIDDLE