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

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>

（总共有七个这样的 "object - anotherobject"-构造）

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

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_'] 将 select 所有 id 以 anotherobject_ 开头的 span 并且 span 以 id 以 object_

开头

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 对象时的唯一 ID

Unique IDs while using jQuery to append HTML Object

html

javascript

jquery

append

unique-id