自動滾動多個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