

jqueryの質問です。  
下記のhtmlを`<br>`が付く時だけclassを自動で追加したいのですがどうすれば良いでしょうか？  
追加したいclassは、3つです。

[code]

    <ul id="menu">
    <li><a href="menu01">りんご<br>アップルパイ</a></li>
    <li><a href="menu02">ぶどう</a></li>
    <li><a href="menu03">いちご<br>いちごショート</a></li>
    <li><a href="menu04">パイナップル</a></li>
    <li><a href="menu05">みかん</a></li>
    </ul>
    
[/code]

jqueryで下のように変更したい

[code]

    <ul id="menu">
    <li class="aaa"><a href="menu01"><span class="bbb">りんご</span><br><span class="ccc">アップルパイ</span></a></li>
    <li><a href="menu02">ぶどう</a></li>
    <li class="aaa"><a href="menu03"><span class="bbb">いちご</span><br><span class="ccc">いちごショート</span></a></li>
    <li><a href="menu04">パイナップル</a></li>
    <li><a href="menu05">みかん</a></li>
    </ul>
    
[/code]

どうかご教授ください。よろしくお願いします。


CC BY-SA 4.0
2018-08-01T02:11:58.513
47147
2018-08-01T11:02:35.767
2018-08-01T03:11:37.533
19110
29540
question
jquery
jquery class追加の件


対象のHTMLを文字列として直接参照して、分析、HTMLを再構築するパターンです。

[code]

    $(function()
    {
        var reg = new RegExp("^(.*)<[bB][rR]>(.*)$");
    
        $("#menu>li").each(function(i, e)
        {
            var htmlStr = $(e).children("a").html();
    
            var result = reg.exec(htmlStr);
    
            if(result === null)
            {
                return;
            }
    
            var newHtml = '<span class="bbb">' + result[1] + '</span><br><span class="ccc">' + result[2] + "</span>";
    
            $(e).children("a").html(newHtml);
            $(e).children("a").addClass("aaa");
        });
    });
    
[/code]


CC BY-SA 4.0
2018-08-01T04:44:38.153
47151
2018-08-01T04:44:38.153
17014
47147
answer


jQueryのセレクタ−で処理するパターンです。

[code]

    $(function()
    {
        $("#menu>li:has(br)").each(function(){
            $(this).addClass( "aaa" );
            s = $(this).children('a').html().split("<br>");
            $(this).children('a').html('<span class=\"bbb\">' + s[0] + '</span><br><span class="ccc">' + s[1] +'</span>');
        });
    });
    
[/code]


CC BY-SA 4.0
2018-08-01T11:02:35.767
47160
2018-08-01T11:02:35.767
15171
47147
answer