jQuery - 选择具有相同 ID 的组的最后一个元素
jQuery - Select last element of a group with the same ID
我有一个表单/表格,通过JS通过添加/删除行(表单输入)来动态更改。我想创建一个计算行数的列,所以我尝试使用,
$("#rowcount:last").replaceWith( "<td>" + newNum + "</td>" );
将计数器列最后一个元素更改为新数字,但在这种情况下,":last"选择器似乎不起作用。这是我的代码供参考(很抱歉我的表格很丑陋。我试图让它看起来尽可能漂亮,但由于我的经验有限,它看起来仍然像是在出生时被打错了一巴掌):
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.ccinput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
// insert the new element after the last "duplicatable" input field
$('#input' + num).after(newElem);
$("#rowcount").replaceWith( "<td>" + newNum + "</td>" );
// enable the "remove" button
$('#btnDel').attr('disabled','');
$("*#date").mask("99/99/9999");
// business rule: you can only add 20 names
if (newNum == 20)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.ccinput').length; // how many "duplicatable" input fields we currently have
$('#input' + num).remove(); // remove the last element
// enable the "add" button
$('#btnAdd').attr('disabled','');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$("*#date").mask("99/99/9999");
});
</script>
</head>
<body>
<form method="post" action="<?php echo htmlentities($PHP_SELF); ?>">
<table border="1" cellspacing="0">
<tr>
<th></th>
<th># (last four digits)</th>
<th>Amount</th>
<th>Approval</th>
<th>Date Received</th>
</tr>
<tbody>
<tr id="input1" class="ccinput">
<td id="rowcount"> 1 </td>
<td> <input id="cnum" type="text" name="cc_num[]" maxlength="4" /> </td>
<td> <input id="camnt" type="int" name="cc_amnt[]" /> </td>
<td> <input id="appr" type="text" name="cc_app[]" maxlength="10" /> </td>
<td> <input id="date" type="text" name="cc_date[]" /> </td>
</tr>
</tbody>
</table>
<div>
<input type="button" id="btnAdd" value="Add" />
<input type="button" id="btnDel" value="Remove" />
</div>
<input type="submit" value="Submit" name="submit" />
</form>
</body>
</html>
您可以使用
:last
选择器:
var newElem = $('.ccinput:last').clone().attr('id', 'input' + newNum);
$('.ccinput:last').after(newElem);
$(".ccinput:last td:first").replaceWith( "<td>" + newNum + "</td>" );
或者您可以尝试以下方法,而不是replaceWith()
:
$(".ccinput:last td:first").html(newNum).removeAttr('id');
演示
没有足够的代表发表评论,但这确实应该是对您的评论线程的回复......
您的 HTML"似乎运行良好",除了您只能获取具有给定 ID 的第一个元素,因为它运行不正常并且是无效的 HTML。换句话说,您的 HTML 在重复的 ID 下无法正常运行(因为它是无效的 HTML)。
与其给一行一个 ID 并复制它,不如给它一个类。这样你的HTML实际上会运行良好(等待对JavaScript的更改,以按类而不是ID选择)。
相关文章:
- 如何查找流星集合中最后一个元素/对象的id
- jQuery - 选择具有相同 ID 的组的最后一个元素
- 将 URL 的最后一个字符串与 Li 的 ID 名称进行比较
- 如何在TR的最后一个TD中添加事件或将ID属性添加到IMG标签
- 如何获取最后一个元素并知道id
- 如何使用jquery获取最后一个元素id值
- 为什么我在循环之后只得到最后一个id道具
- 我有DIV和它的子DIV,我想用jQuery选择最后一个DIV.父DIVS具有id
- 锚点上的动态 ID 未在其他锚点上触发最后一个锚点 PHP js PDO
- 单击DIV上的所有ID时如何显示最后一个ID
- 无法使用数据库中的最后一个值自动更新注册ID
- 如何使用jQuery获取文本字段id的最后一个数字
- 自定义正则表达式过滤掉最后一个url路径中的ID
- 只需要获取ID的一部分最后一个下划线之后的所有内容
- JSON文件只显示最后一个条目,尽管id不同
- 显示id中最后一个数字小于i的元素
- 如何用JavaScript在HTML中找到最后一个id
- 从id属性获取最后一个字符
- 当我创建新包并添加两个或更多盒子时,所有盒子的id将与最后一个盒子的id相同
- 如何获取最后一个元素的id