自动滚动多个Div与表

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 here和以下片段：

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]：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

UPDATED JSFIDDLE