jquery - 从元素内容设置属性

Question

假设你有这个：

<ul>
  <li>[foo] more stuff here</li>
  <li>[bar] stuff here</li>
  <li>[123] stuff here</li>
</ul>

你想要这个：

<ul>
  <li id="foo">more stuff here</li>
  <li id="bar">stuff here</li>
  <li id="123">stuff here</li>
</ul>

使用 jQuery，最简单的方法是什么？

Answer 1

$("ul li").each(function(){
    $li = $(this);
    var text = $li.text();
    var id = text.substring(text.indexOf("[") + 1, text.indexOf("]"));
    $li.attr("id", id).text(text.replace("[" + id + "]", ""));
});

---

小提琴：http: //jsfiddle.net/hunter/FDTcj/

---

摆弄其他括号：http: //jsfiddle.net/hunter/FDTcj/1/

Answer 2

单独的 jquery 不会这样做，您需要解析内容。我个人会使用正则表达式：

$("li").each() {
    var regex = /\[([^\]]+)\] (.*)/;
    var matches = regex.exec($(this).html());
    $(this).attr("id", matches[1]);
    $(this).html(matches[2]);
};

Answer 3

我们可以使用正则表达式来做到这一点。- FIDDLE

$(document).ready(function(){
    $('ul').children().each(function(){
        $strVal=$(this).text();
        //extracting the required id value.
        var $idVal=((/\[.*\]/g.exec($strVal)).toString()).replace(/(?:\[|\])/g,"");
        $(this).html($strVal.replace(/\[.*\]/g,""));
        alert($idVal);
        $(this).attr('id',$idVal);
    });
});