将表结果迭代到具有相同类的不同 div答案

【问题标题】：Iterate Table result to different divs with the same class将表结果迭代到具有相同类的不同 div
【发布时间】：2019-01-16 00:41:01
【问题描述】：

使用此代码....尝试从每个多个表中获取结果并将结果定位到具有相同类的 div...从每个表到每个 div 的一个结果...不添加任何 id等等......而不是使用.after（）。希望这是有道理的。您可以看到我设置的一些 console.logs...但似乎无法让它以正确的结果填充 div。

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
$(document).ready(function() {

//Get Number of Divs with class='sum'
var divN = $( ".sum" ).length;
console.log('Number of Divs in page that match class sum : ' + divN);

//Get Number of TDs with class='two'
var tdN = $( ".two" ).length;
console.log('Number of TDs in page that match class two : ' + tdN);

//Get Number of Tables
var tblN = $( "table" ).length;
console.log('Number of Tables in page : ' + tblN);

//Get Number of TDs with class='two' in each table
$("table").each(function(){
tblSum = $('.two', this).length;
console.log('Number of TDs that match class two in each Table : ' + tblSum);
});

//Get result from each table and place it in div class="sum"
$(".sum").text(tblSum);
});

        </script>
    </head>
    <body>
<table>
        <tr><td class="one">Test</td></tr>
        <tr><td class="one">Test</td></tr>
        <tr><td class="one two">Test</td></tr>
        <tr><td class="one">Test</td></tr>
        <tr><td class="one">Test</td></tr>
        <tr><td class="one two">Test</td></tr>

</table>
<div class="sum"></div>
<table>
        <tr><td class="one">Test</td></tr>
        <tr><td class="one">Test</td></tr>
        <tr><td class="one two">Test</td></tr>
        <tr><td class="one">Test</td></tr>
        <tr><td class="one">Test</td></tr>
        <tr><td class="one">Test</td></tr>

</table>
<div class="sum"></div>

</body>
</html>

【问题讨论】：

你的问题是什么？
如何从每个多个表中获取结果并将结果定位到具有相同类的 div...从每个表到每个 div 的一个结果...不添加任何 id 等....而不是使用 .after()。表 1 的结果应该是第一次出现的 div，其值为 class="sum"。第二个表结果应该转到第二次出现 class="sum" 的 div。试图弄清楚我如何才能做到这一点。
result这个词是什么意思？！！

标签： javascript jquery loops iteration each

【解决方案1】：

您可以使用next() 函数，例如：

$(this).next('.sum').text(tblSum);

$(document).ready(function() {
  $("table").each(function() {
    var tblSum = $('.two', this).length;
    $(this).next('.sum').text(tblSum);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="one">Test</td>
  </tr>
  <tr>
    <td class="one">Test</td>
  </tr>
  <tr>
    <td class="one two">Test</td>
  </tr>
  <tr>
    <td class="one">Test</td>
  </tr>
  <tr>
    <td class="one">Test</td>
  </tr>
  <tr>
    <td class="one two">Test</td>
  </tr>

</table>
<div class="sum"></div>
<table>
  <tr>
    <td class="one">Test</td>
  </tr>
  <tr>
    <td class="one">Test</td>
  </tr>
  <tr>
    <td class="one two">Test</td>
  </tr>
  <tr>
    <td class="one">Test</td>
  </tr>
  <tr>
    <td class="one">Test</td>
  </tr>
  <tr>
    <td class="one">Test</td>
  </tr>

</table>
<div class="sum"></div>

【讨论】：