Question

我有以下代码，哪种工作，除了我在所有行上重复相同的答案。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>each demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<span>(click here to change)</span>
<table width="50%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <th scope="col">Part Number</th>
    <th scope="col">Result</th>
  </tr>
  <tr>
    <td id="pn">84ps01</td>
    <td class="div1">&nbsp;</td>
  </tr>
  <tr>
    <td id="pn">92K002</td>
    <td class="div1">&nbsp;</td>
  </tr>
  <tr>
    <td id="pn">68F017</td>
    <td class="div1">&nbsp;</td>
  </tr>
</table>


<script>
$( "span" ).click(function() {
    var pn = $("#pn").text();
  $( "td#pn" ).each(function() {
      $(".div1").load("data.asp?prodref="+($(this).text()))
  });
  });

</script>
 $(this).("#div1").load("data.asp?prodref="+pn+"#result");
</body>
</html>

data.asp是一个简单页面，使用request.querystring("prodref")查询数据库以返回结果。

所以我试图让表中的每一行查询数据库并返回结果。

Answer 1

ID应该是唯一的，不同的HTML元素不能具有相同的ID ，请使用类。

<tr>
    <th scope="col">Part Number</th>
    <th scope="col">Result</th>
  </tr>
  <tr>
    <td class="pn">84ps01</td>
    <td class="div1">&nbsp;</td>
  </tr>
  <tr>
    <td class="pn">92K002</td>
    <td class="div1">&nbsp;</td>
  </tr>
  <tr>
    <td class="pn">68F017</td>
    <td class="div1">&nbsp;</td>
  </tr>

jQuery：

$( "td.pn" ).each(function() {
      $(this).next().load("data.asp?prodref="+($(this).text()))
});

您得到了相同的答案，因为id始终引用第一个匹配的元素。

并使用.next()转到当前元素的下一个兄弟。

Answer 2

使用行

加载数据时

$(".div1").load("data.asp?prodref="+($(this).text()))

你会看到你正在使用类td加载每个div1中的最后一个结果（这就是为什么你在每一行中看到相同的东西）。

你需要做什么而不是就是找到每行的相应div1并插入数据。

解决方案看起来像这样：

$(document).ready(function() {
    $( "span" ).click(function() {
        var pn = $("#pn").text();
        $( ".pn" ).each(function() {
            $(this).closest('tr').find(".div1").load("data.asp?prodref="+($(this).text()));
        });
    });
});

上面的代码正在做的是找到每个.pn并迭代它们（.each()），然后找到遍历DOM树的.closest() tr，找到该特定.div1中的tr，然后将结果加载到其中。

另外，作为fyi，id应该是唯一的，因此您应该将id="pn切换为class="pn"

<tr>
    <td class="pn">68F017</td>
    <td class="div1">&nbsp;</td>
</tr>

jQuery .each（）重复所有行的答案

2 个答案: