JQuery：创建带有数据属性的新元素

Question

请帮我一下，我在动态创建以下的Flexbox脚本方面遇到了困难。

<div class="Table-row">
    <div class="Table-row-item u-Flex-grow2" data-header="Header1">row2 col1</div>
    <div class="Table-row-item" data-header="Header2">row2 col2</div>
    <div class="Table-row-item" data-header="Header3">row2 col3</div>
    <div class="Table-row-item" data-header="Header4">row2 col4</div>
    <div class="Table-row-item u-Flex-grow3" data-header="Header5">row2 col5</div>
    <div class="Table-row-item" data-header="Header6">row2 col6</div>
    <div class="Table-row-item" data-header="Header7">row2 col7</div>
  </div>

在我的jQuery中，我像下面这样循环。

for (var i = 0 ; i < data.length ; i++){
   var className = metadata[i].toLowerCase().replace(/\s/g, "-") + " Table-row-item";
   var rowElement = $("<div></div>", {class: className, text: data[i]});

   $('.'+className).prop('data-header', 'value');
   rowElement.appendTo($tr);
}

问题是

$('.'+className).prop('data-header', 'value');

不能添加我的data-header属性。我尝试像下面这样添加：

不能添加我的data-header属性。我尝试像下面这样添加：

$("<div></div>", {class: className, text: data[i], data-header :'value'})

而且它会抛出错误。

我尝试过

$('.'+className).attr('data-header', 'value');

如此处所解释的一样，但它并没有新增。请问我应该如何动态添加属性？任何帮助或建议将不胜感激。

- Nuru Salihu

Answer 1

将 data-header 包装在 ' 中。:-

$("<div></div>", { 'class': className, 'text': data[i], 'data-header' :'value'});

另一种选项是设置rowElement：-

var rowElement = $("<div></div>", {class: className, text: data[i]});
rowElement.prop('data-header', 'value');

或者

var rowElement = $("<div></div>", {class: className, text: data[i]}).prop('data-header', 'value');

$('.'+className) 只有在你 append 之后才可用。

虽然你应该使用 .data('header', 'value'); 来设置 data。

- BenG

---

谢谢，最后一个选项对我有用，看来不将 data-header 放在引号中是我的错误。 - Nuru Salihu

Answer 2

以下代码有效，并将data属性添加到类className的元素中：

$('.'+className).attr('data-header', 'value');

但是在你的情况下，你可以添加 rowElement ，因为该变量未被添加到DOM中：

$(rowElement).find('.'+className).attr('data-header', 'value');

注意：当您想要set或get数据属性时，最好使用data而不是attr。

希望这可以帮助您。

- Zakaria Acharki

Answer 3

.attr 

不允许添加自定义头部 请使用

.data

改为使用。

http://api.jquery.com/jQuery.data/

- lyRx