Javascript 使用jQuery追加HTML对象时的唯一ID

我有一个HTML表单，其中使用jQuery附加了一些HTML对象，以保持代码整洁（ish）

（总共有七个这样的“对象-另一个对象”-构造）

我添加了七次简单的文本输入和选择框：

for (i = 0; i < 8; i++) {
$("#object_" + i).append("\
<input style='display: inline; margin-left: 15px; margin-right: 5px;  height: 15px; width:25px;' type='text'>");

$("#anotherobject_" + i).append("\
            <select style='display: inline; margin-left:  margin-top: -10px; width:45px;'>\
                    <option value='1'>1</option>\
                    <option value='2'>2</option>\
                    <option value='3'>3</option>\
                    <option value='4'>4</option>\
                    <option value='5'>5</option>\
                    <option value='6'>6</option>\
                    <option value='7'>7</option>\
                    <option value='8'>8</option>\
                </select>");

}

（i=0；i<8；i++）的

{
$（“#对象”+i）.append（“\
");
$（“#另一个对象”+i）.append（“\
\
1\
2\
3\
4\
5\
6\
7\
8\
");
}

所以现在我的问题是，如果我在javascript中给这两个对象一个ID，我会得到七个具有相同ID的对象，如果我试图访问它们的特定值，这当然是个问题。。。我能做什么

提前感谢：）

您可以执行以下操作：

for (i = 0; i < 8; i++) {
    $("#object_" + i).append("\
         <input id='txt_"+i+"' style='display: inline; margin-left: 15px; margin-right: 5px;  height: 15px; width:25px;' type='text'>");

$("#anotherobject_" + i).append("\
            <select id='select_"+i+"' style='display: inline; margin-left:  margin-top: -10px; width:45px;'>\ 
                    <option value='1'>1</option>\
                    <option value='2'>2</option>\
                    <option value='3'>3</option>\
                    <option value='4'>4</option>\
                    <option value='5'>5</option>\
                    <option value='6'>6</option>\
                    <option value='7'>7</option>\
                    <option value='8'>8</option>\
                </select>");
}

span[id^='anotherobject.']

将选择所有

span

的

id

以

anotherobject.

开头的

span

和

id

以

object.
开头的

for (i = 0; i < 8; i++) {
    $("#object_" + i).append("\
         <input id='txt_"+i+"' style='display: inline; margin-left: 15px; margin-right: 5px;  height: 15px; width:25px;' type='text'>");

$("#anotherobject_" + i).append("\
            <select id='select_"+i+"' style='display: inline; margin-left:  margin-top: -10px; width:45px;'>\ 
                    <option value='1'>1</option>\
                    <option value='2'>2</option>\
                    <option value='3'>3</option>\
                    <option value='4'>4</option>\
                    <option value='5'>5</option>\
                    <option value='6'>6</option>\
                    <option value='7'>7</option>\
                    <option value='8'>8</option>\
                </select>");
}

span[id^='anotherobject.']
将选择所有
span
的
id
以
anotherobject.
开头的
span
和
id
以
object.
开头的

for (i = 0; i < 8; i++) {
    $("#object_" + i).append("\
         <input id='txt_"+i+"' style='display: inline; margin-left: 15px; margin-right: 5px;  height: 15px; width:25px;' type='text'>");

$("#anotherobject_" + i).append("\
            <select id='select_"+i+"' style='display: inline; margin-left:  margin-top: -10px; width:45px;'>\ 
                    <option value='1'>1</option>\
                    <option value='2'>2</option>\
                    <option value='3'>3</option>\
                    <option value='4'>4</option>\
                    <option value='5'>5</option>\
                    <option value='6'>6</option>\
                    <option value='7'>7</option>\
                    <option value='8'>8</option>\
                </select>");
}

span[id^='anotherobject.']
将选择所有
span
的
id
以
anotherobject.
开头的
span
和
id
以
object.
开头的

for (i = 0; i < 8; i++) {
    $("#object_" + i).append("\
         <input id='txt_"+i+"' style='display: inline; margin-left: 15px; margin-right: 5px;  height: 15px; width:25px;' type='text'>");

$("#anotherobject_" + i).append("\
            <select id='select_"+i+"' style='display: inline; margin-left:  margin-top: -10px; width:45px;'>\ 
                    <option value='1'>1</option>\
                    <option value='2'>2</option>\
                    <option value='3'>3</option>\
                    <option value='4'>4</option>\
                    <option value='5'>5</option>\
                    <option value='6'>6</option>\
                    <option value='7'>7</option>\
                    <option value='8'>8</option>\
                </select>");
}

span[id^='anotherobject.']
将选择所有
span
的
id
以
anotherobject.
开头的
span
和
id
以
object.
开头的
span
您可以使用作为第二个参数传递的JSON对象使代码更可读

然后还可以在创建元素后设置id

var input_attr = { style: 'display: inline; margin-left: 15px; margin-right: 5px;  height: 15px; width:25px;', type: 'text' };
var select_attr = { style: 'display: inline; margin-left:  margin-top: -10px; width:45px;';
var options = [1,2,3,4,5,6,7,8];

for (i = 0; i < 8; i++) {

  $("#object_" + i).append(
    $('<input>', input_attr).attr('id', 'input_text_'+i);
  );

  var $select = $('<select>', select_attr).attr('id', 'input_select_'+i);

  $.each(options, function(key, value) {
     $select.append($('<option>', { text: value, value: value }));
  })

  $("#anotherobject_" + i).append($select);

}

var input_attr={style:'显示：内联；左边距：15px；右边距：5px；高度：15px；宽度：25px；'，键入：'文本'；
var select_attr={style:'显示：内联；左边距：边距顶部：-10px；宽度：45px；'；
var期权=[1,2,3,4,5,6,7,8]；
对于（i=0；i<8；i++）{
$（“#对象#”+i）.append(
$（''，input_attr）.attr（'id'，'input_text'+i）；
);
var$select=$（''，select\u attr）.attr（'id'，'input\u select'+i）；
$。每个（选项、功能（键、值）{
$select.append（$（''，{text:value，value:value}））；
})
$（“#另一个对象”+i）.append（$select）；
}
您可以使用作为第二个参数传递的JSON对象来提高代码的可读性

然后还可以在创建元素后设置id

var input_attr = { style: 'display: inline; margin-left: 15px; margin-right: 5px;  height: 15px; width:25px;', type: 'text' };
var select_attr = { style: 'display: inline; margin-left:  margin-top: -10px; width:45px;';
var options = [1,2,3,4,5,6,7,8];

for (i = 0; i < 8; i++) {

  $("#object_" + i).append(
    $('<input>', input_attr).attr('id', 'input_text_'+i);
  );

  var $select = $('<select>', select_attr).attr('id', 'input_select_'+i);

  $.each(options, function(key, value) {
     $select.append($('<option>', { text: value, value: value }));
  })

  $("#anotherobject_" + i).append($select);

}

var input_attr={style:'显示：内联；左边距：15px；右边距：5px；高度：15px；宽度：25px；'，键入：'文本'；
var select_attr={style:'显示：内联；左边距：边距顶部：-10px；宽度：45px；'；
var期权=[1,2,3,4,5,6,7,8]；
对于（i=0；i<8；i++）{
$（“#对象#”+i）.append(
$（''，input_attr）.attr（'id'，'input_text'+i）；
);
var$select=$（''，select\u attr）.attr（'id'，'input\u select'+i）；
$。每个（选项、功能（键、值）{
$select.append（$（''，{text:value，value:value}））；
})
$（“#另一个对象”+i）.append（$select）；
}
您可以使用作为第二个参数传递的JSON对象来提高代码的可读性

然后还可以在创建元素后设置id

var input_attr = { style: 'display: inline; margin-left: 15px; margin-right: 5px;  height: 15px; width:25px;', type: 'text' };
var select_attr = { style: 'display: inline; margin-left:  margin-top: -10px; width:45px;';
var options = [1,2,3,4,5,6,7,8];

for (i = 0; i < 8; i++) {

  $("#object_" + i).append(
    $('<input>', input_attr).attr('id', 'input_text_'+i);
  );

  var $select = $('<select>', select_attr).attr('id', 'input_select_'+i);

  $.each(options, function(key, value) {
     $select.append($('<option>', { text: value, value: value }));
  })

  $("#anotherobject_" + i).append($select);

}

var input_attr={style:'显示：内联；左边距：15px；右边距：5px；高度：15px；宽度：25px；'，键入：'文本'；
var select_attr={style:'显示：内联；左边距：边距顶部：-10px；宽度：45px；'；
var期权=[1,2,3,4,5,6,7,8]；
对于（i=0；i<8；i++）{
$（“#对象#”+i）.append(
$（''，input_attr）.attr（'id'，'input_text'+i）；
);
var$select=$（''，select\u attr）.attr（'id'，'input\u select'+i）；
$。每个（选项、功能（键、值）{
$select.append（$（''，{text:value，value:value}））；
})
$（“#另一个对象”+i）.append（$select）；
}
您可以使用作为第二个参数传递的JSON对象来提高代码的可读性

然后还可以在创建元素后设置id

var input_attr = { style: 'display: inline; margin-left: 15px; margin-right: 5px;  height: 15px; width:25px;', type: 'text' };
var select_attr = { style: 'display: inline; margin-left:  margin-top: -10px; width:45px;';
var options = [1,2,3,4,5,6,7,8];

for (i = 0; i < 8; i++) {

  $("#object_" + i).append(
    $('<input>', input_attr).attr('id', 'input_text_'+i);
  );

  var $select = $('<select>', select_attr).attr('id', 'input_select_'+i);

  $.each(options, function(key, value) {
     $select.append($('<option>', { text: value, value: value }));
  })

  $("#anotherobject_" + i).append($select);

}

var input_attr={style:'显示：内联；左边距：15px；右边距：5px；高度：15px；宽度：25px；'，键入：'文本'；
var select_attr={style:'显示：内联；左边距：边距顶部：-10px；宽度：45px；'；
var期权=[1,2,3,4,5,6,7,8]；
对于（i=0；i<8；i++）{
$（“#对象#”+i）.append(
$（''，input_attr）.attr（'id'，'input_text'+i）；
);
var$select=$（''，select\u attr）.attr（'id'，'input\u select'+i）；
$。每个（选项、功能（键、值）{
$select.append（$（''，{text:value，value:value}））；
})
$（“#另一个对象”+i）.append（$select）；
}
您只需使用
i
增量创建id值，与创建选择器以查找要附加到的项相同。尝试此操作为什么需要id？您可以通过多种方式访问dom元素，包括
：nth-child（）
selector等。您只需使用
i
增量创建id值，与创建选择器以查找要附加到的项相同。试试这个为什么需要id？您可以通过各种方式访问dom元素，包括
：nth-child（）
selector等。您只需使用
i
增量创建id值，与创建选择器以查找要附加到的项相同。试试这个为什么需要id？您可以通过各种方式访问dom元素，包括
：nth-child（）
selector等。您只需使用
i
增量创建id值，与创建选择器以查找要附加到的项目相同。试试这个为什么需要id？哟