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属性。我尝试添加它像

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

它会引发错误。

我试过

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

作为解释在这里也没有添加。请问如何动态实现或添加属性？任何帮助或建议将不胜感激。

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。

Answer 2

以下代码可以正常工作，并将data属性添加到具有类className的元素中：

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

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

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

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

希望这有帮助。

Answer 3

.attr

不允许添加自定义标头使用

.data

代替。

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

JQuery：使用数据属性

3 个答案: