Question

我有一个select元素，我想从中获取一些自定义数据。我不知道这种语法是否正确，但是可以获取数据吗？

<select data-select="placeholder:This is title; width:300px; dissabled; hidden;"></select>

如果该属性在冒号[：]内部，则我想用它的左侧部分作为新属性，而将右侧部分用作此值
分号[; ]用于破坏此新属性
逻辑就像样式属性

我想要的代码具有以下形式：

$("[data-selectlist]").each(function(){
    var $ul = $("<ul/>", {
        'placeholder': $(this).attr('placeholder'),
        'width' : $(this).attr('width')
    });
    .
    .
    .
});

使用我可以替换的.attr（）获得所需的结果？

Answer 1

访问每个$("[data-select]")元素.attr("data-select")
迭代该值并创建一个{attr1:val, attr2:val}之类的对象
将创建的属性对象应用于相同（或某些）元素： $(this).attr(attrObj)或$("<ul/>", {attr: attrObj})

$("[data-select]").attr("data-select", function(i, data) {

  if ( !data ) return; // Early return
  
  // Convert data values to attributes object
  const attrObj = data.match(/(?!\s)[^;]+/g).reduce((acc, cur) => {
    const p = cur.split(":");
    acc[p[0]] = p[1] || p[0];
    return acc;
  }, {});

  console.log(attrObj);
  
  // Apply attributs object to element
  $(this).attr(attrObj)

});

Select is now hidden! Inspect element to see the attributes applied!<br>
<select data-select="placeholder:This is title;   width:300px; disabled; hidden;">
  <option>test</option>
</select>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

jQuery从自定义属性获取多个数据

1 个答案: