Question

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

<span id="object_1"></span><span id="anotherobject_1"></span>
<span id="object_2"></span><span id="anotherobject_2"></span>

（总共有七个＆＃34;对象 - 另一个对象＆＃34; -constructs）

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

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>");

}

所以现在我的问题是，如果我在javascript中给这两个对象一个ID，我最终得到七个具有相同ID的对象，当然如果我试图访问它们的特定值，那就是一个问题......我该怎么办？

提前致谢：）

Answer 1

您可以执行以下操作：

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>");
}

只需使用您引用的i值即可获得object和anotherobject

您也可以使用$.each

完成以下操作

$.each($("span[id^='object_']"),function(key){
    $(this).append("<input id='txt_"+key+"' style='display: inline; margin-left: 15px; margin-right: 5px;  height: 15px; width:25px;' type='text'>");
});

$.each($("span[id^='anotherobject_']"),function(key){
          $(this).append("<select id='select_"+key+"' 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_开头{ {1}}

Answer 2

您可以create an element with attrbutes in jQuery使用作为第二个参数传递的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);

}

使用jQuery追加HTML对象

2 个答案: