jquery选择元素的问题

<div id="div1">
<input id="txt1" type="text"/>
<input id="add1" type="button" value="添加"/>
<input id="del1" type="button" value="删除"/></div>
我想动态控制input条数，也就是点击添加增加一行text，删除去掉一行，我用的方法是点击添加时先添加一条id固定的text及button，然后遍历此div，分别去修改text及button的id，代码如下
var a = "<br /><input id='txtZBGZ'type='text'/> <input id='btnAddStep' type='button' value='增加' /> <input id='btnDelStep' type='button' value='删除' />";
    $(a).insertAfter("#" + before);
    $("#divZBGZ").find(":text").each(function(index){
        $(this).attr({
            'id': 'txtZBGZ' + index
        });
    });
    $("#divZBGZ").find(":button").each(function(index){
        $(this).attr({
            'id': this.id.substring(0,10) + index
        })
    })
但这样却将添加及删除两个button一起处理了，怎么才能将这两个按钮分开处理呢？或者有其他更好地办法去分配id

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

给你的del 和 add 按钮增加一个class属性呗，通过calss属性的不同来区分呗。。比如
$("#divZBGZ").find("input.del").each(function(index){ $(this).attr({ 'id': this.id.substring(0,10) + index }) })
$("#divZBGZ").find("input.add").each(function(index){ $(this).attr({ 'id': this.id.substring(0,10) + index }) })只能理解到这个程度了，至于你为什么要这么做，实在不懂
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#btnAddStep").click( function() {
var oTxt = $("#demo :text");
oTxt.length < 1 ? $('<p><input type="text" id="txt1" /></p>').prependTo("#demo") : oTxt.eq(oTxt.length - 1).parent().after('<p><input type="text" id="txt' + (oTxt.length + 1) + '" /></p>');
});
$("#btnDelStep").click( function() {
var oTxt = $("#demo :text");
if (oTxt.length > 0) oTxt.filter(":last").parent().remove();
});
});
</script>
</head><body>
<div id="demo">
<p><input type="button" id="btnAddStep" value="添加" /></p>
    <p><input type="button" id="btnDelStep" value="删除" /></p>
</div>
</body>
</html>
这就是全的了，功能就是点击添加，自动添加一行内容，包括text，btnadd，btndel，然后对所有元素的id重新分配，那个before，是函数参数，也就是要插入的位置。下面是初始效果
<input id="txtZBGZ0" type="text">
<input id="btnAddItem0" type="button" onclick="funAddItemOnclick("btnDelItem1",1)" value="增加">
<input id="btnDelItem0" type="button" value="删除">
<br>[code]
下面是代码实现的效果
[code=HTML]<input id="txtZBGZ0" type="text">
<input id="btnAddItem0" type="button" onclick="funAddItemOnclick("btnDelItem1",1)" value="增加">
<input id="btnDelItem1" type="button" value="删除">
<br>
<input id="txtZBGZ1" type="text">
<input id="btnAddStep2" type="button" value="增加">
<input id="btnDelStep3" type="button" value="删除">
<br>
下面是我想要的效果
<input id="txtZBGZ0" type="text">
<input id="btnAddItem0" type="button" onclick="funAddItemOnclick("btnDelItem1",1)" value="增加">
<input id="btnDelItem0" type="button" value="删除">
<br>
<input id="txtZBGZ1" type="text">
<input id="btnAddStep1" type="button" value="增加">
<input id="btnDelStep1" type="button" value="删除">
<br>
我XXX啊，你这只是想要每次生成的HTML DOM对象的ID都不一样而已么。那你只需要记录一个全局变量比如i表示当前这样的对象生成过多少个了。。var i = 0
funAddItemOnclick("btnDelItem1",1)var a = "<br /><input id='txtZBGZ'type='text'/> <input id='btnAddStep' type='button' value='增加' /> <input id='btnDelStep' type='button' value='删除' />";这里然后吧i应用到这个字符串拼接里生成你想要的HTML源码字符串，然后在insertBefore 同时给i++
你弄得太麻烦了，两个按钮的id值完全是多余的。
1.7+版本用on()方法代替live()方法绑定事件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".btnAdd").live('click', function() {
var _id = $(this).prevAll(":text:eq(0)").attr("id");
_id = _id.substring(0, _id.length - 1) + (parseInt(_id.substr(-1)) + 1);
$(this).parent().after('<p><input type="text" id="' + _id + '" /><input type="button" class="btnAdd" value="增加" /><input type="button" class="btnDel" value="删除" /></p>');
});
$(".btnDel").live('click', function() {
$(this).parent().remove();
});
});
</script>
</head><body>
<div id="demo">
  <p>
    <input id="txtZBGZ0" type="text" /><input class="btnAdd" type="button" value="增加" /><input class="btnDel" type="button" value="删除" />
  </p>
</div>
</body>
</html>
考虑过加css，但觉得这方法不太靠谱
大牛，果然厉害，哈哈，不过有个小问题，_id = _id.substring(0, _id.length - 1) + (parseInt(_id.substr(-1)) + 1);
如果超过10怎么办？
确实考虑不够周全，除了你说的这个问题，还有个硬伤。先理清楚你的需求，如果碰到下面这种情况该怎么处理：
text 1  add  del
text2  add  del
text3  add del
点击缔二行的add按钮后，你是想在这一行的后面插入一个新的行还是说在所有行的最后追加一行？文本框的id值编号是否需要在任何情况下都必须是连续的？
另，如果我想把text换成textara，那么在选择时应该怎么写
初步想法，在ready时通过ajax从服务器获取数据，通过json格式接收，再重绘控件，但不知通过您提供的代码是否还可以保留添加删除功能？我先试试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var _prefix = 'txtZBGZ'; //textarea元素name值前缀
var html = '<p><textarea></textarea><input type="button" class="btnAddItem" value="添加" /><input type="button" class="btnDelItem" value="删除" /></p>';//定义一个函数resetName()，用于form元素中的DOM结构发生变化时重新设置各textarea元素的name值，使name值连续
function resetNames() {
$("#demo textarea").each( function(i) {
$(this).attr("name", _prefix + (i + 1));
});
}
$(document).ready( function() {
//通过JSON或者数组初始化form的DOM结构
//假设接收的是一个JS数组，数据如下
data = [
'STEP1',
'STEP2',
'STEP3'
];
var sData = '';
$(data).each( function(k, v) {
sData += '<p><textarea>' + v + '</textarea>' + '<input type="button" class="btnAddItem" value="添加" /><input type="button" class="btnDelItem" value="删除" /></p>';
resetNames();
});
$("#demo").prepend(sData);

$("#demo").on("click", "input.btnAddItem", function() {
$(this).parent().after(html);
resetNames();
});
$("#demo").on("click", "input.btnDelItem", function() {
$(this).parent().remove();
resetNames();
});
});
</script>
</head><body>
<form id="demo"></form>
</body>
</html>