Question

我目前正在追加像这样的元素

$('#action_existing_email').append($('<option>', {
    value: templates[i].id,
    text: templates[i].name
}));

我想追加像data-version="1"

这样的数据属性

我是否可以添加data: ("foo", "bar")之类的内容来获取data-foo="bar"

Answer 1

看起来您可以将数据作为对象提供。

＆＃13;

$(document.body).append($('<div>', { id: 'test1', data: { name: 'Timmy' } }));

console.log($('#test1').data('name'));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

你可以像这样做

$('#action_existing_email').append($('<option>', {
  value: "value",
  text: "text",
  id : "opt",
  data: {
    version: 1
  }
}));

console.log($("#opt").data('version'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="action_existing_email"></select>

P.S。请注意，jQuery在内部缓存data-*属性，并且它们不会作为属性添加到DOM中，因此它们不可见：

Answer 3

您可以使用模板文字来形成您想要的HTML，这样您就不会受到第三方API的限制。

$('#action_existing_email').append(`
  <option value=${templates[i].id} data-version=1>${templates[i].name}</option>`
);

这可让您准确了解自己要追加的内容，而无需了解API的内部工作原理。

当然，你只需要完全原生一步即可。

var templates = [
  {id:"foo", name:"FOO"}
];
var email = document.querySelector('#action_existing_email');

for (var i = 0; i < templates.length; i++) {
  email.insertAdjacentHTML("beforeend",
      `<option value=${templates[i].id} data-version=1>${templates[i].name}</option>`
    );
}

console.log(email.options[0].dataset.version);

<select id=action_existing_email></select>

使用for-of循环代替缩短代码。

var templates = [
  {id:"foo", name:"FOO"}
];
var email = document.querySelector('#action_existing_email');

for (const o of templates) {
  email.insertAdjacentHTML("beforeend", `<option value=${o.id} data-version=1>${o.name}</option>`);
}

console.log(email.options[0].dataset.version);

<select id=action_existing_email></select>

Answer 4

或者您可以使用如下字符串设置data- *属性。

$('select').append($('<option>', {
  value: 'foo',
  text: 'foo',
  'data-version': 1
}));

console.log($('option').data('version'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>

Jquery - 如何在追加html元素时添加自定义数据属性

4 个答案: