javascript-jQuery AJAX每个问题
作者：互联网
我正在使用jquery并且我的脚本如下；
$(document).ready( function() {
$('.nm').each(function(row) {
$.ajax({
type: 'POST',
url: 'test.php',
data: 'id=' + 1,
dataType: 'json',
cache: false,
success: function(result) {
$('.title').each(function(index){
if (result) {
$(this).html(result[index]);
} else {
$(this).html(" ");
}
});
},
});
});
});
该脚本假设是要更改表中的文本；
<tr class="nm" style="height: 30px">
<td style="width: 15px;"> </td>
<td class="section" colspan="5">Mix</td>
<td style="width: 15px;"> </td>
</tr>
<tr>
<td id="prev" rowspan="2"><<</td>
<td class="content"> </td>
<td class="content"> </td>
<td class="content"> </td>
<td class="content"> </td>
<td class="content"> </td>
<td id="next" rowspan="2">>></td>
</tr>
<tr>
<td class="title" > </td>
<td class="title" > </td>
<td class="title" > </td>
<td class="title" > </td>
<td class="title" > </td>
</tr>
<tr class="nm" style="height: 30px">
<td style="width: 15px;"> </td>
<td class="section" colspan="5">Mix</td>
<td style="width: 15px;"> </td>
</tr>
<tr>
<td id="prev" rowspan="2"><<</td>
<td class="content"> </td>
<td class="content"> </td>
<td class="content"> </td>
<td class="content"> </td>
<td class="content"> </td>
<td id="next" rowspan="2">>></td>
</tr>
<tr>
<td class="title" > </td>
<td class="title" > </td>
<td class="title" > </td>
<td class="title" > </td>
<td class="title" > </td>
</tr>
如您所见,该表有6行,并且是3行重复格式.内容由test.php文件填充,该文件回显包含5个成员的json编码数组.这样,所有具有class =“ title”的5个单元格都将成功填充.但是第二个带有class =“ title”的集合没有被填满..我对每个具有class =“ nm”的行都做了一个each(function(row)来重复ajax调用.但这是行不通的. [index]在ajax之后不会重置,因为如果我在数组中提供了5个以上的成员,则剩余的单元格将在填充. ..
我怎样才能做到这一点？？
提前致谢…
解决方法:
$(‘.title’)总是选择每个.title元素.您没有将集合限制为任何特定的集合.您必须以某种方式使选择器依赖于.nm.
例如：
$('.nm').each(function() {
var $row = $(this);
$.ajax({
type: 'POST',
url: 'test.php',
data: 'id=' + 1,
dataType: 'json',
cache: false,
success: function(result) {
var $titles = $row.next().next().children('.title');
if (result) { // it's enough to check *once* whether it is set
$titles.html(function(index){ // easier
return result[index];
});
}
else {
$titles.html(" ");
}
});
});
});
这应该与您提供的结构一起使用. $row引用每个< tr class =“ nm”> row和$row.next().next()将选择第二个下一个同级,即包含.title元素的行.
如果更改结构,它将损坏.
如果将包含.title元素的行赋予自己的类,那就更好了：
<tr class="something">
<td class="title" > </td>
<!-- ... -->
</tr>
然后,您可以迭代这些行而不是.nm行,并使用$row.children(‘.title’)获得.title元素.
标签：ajax,javascript-events,javascript,jquery 来源： https://codeday.me/bug/20191208/2090038.html