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);
    });
});