0

我有一个 HTML 表单，我在其中使用 jQuery 附加一些 HTML 对象以保持代码干净（ish）。

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

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

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

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 的对象，如果我尝试访问它们的特定值，那当然是个问题......我能做什么做？

提前致谢 ：）

4

2 回答 2

2

您可以执行以下操作：

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_idobject_

于 2015-08-27T03:58:03.830 回答
1

您可以使用作为第二个参数传递的 JSON 对象在 jQuery 中创建具有属性的元素，以使代码更具可读性。

然后，您还可以在创建元素后设置 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);

}
于 2015-08-27T04:13:10.500 回答