javascript - 获取每种语言的跨度标题并插入新的跨度

Question

我有以下一段 html(在 cms 环境中):

<div id="languageswitch">
    <div class="language-object">
        <span class="Language selected" title="English (United States)">
        </span>
        <span class="Language" title="Nederlands (Nederland)">
            <a href="http://mylocalwebsite.nl/nl-nl/">
            </a>
        </span>
    </div>
</div>

所以我想获取每种语言的跨度标题，并将其插入并用类文本包装在另一个跨度中。 HTML 结果应如下所示:

<div id="languageswitch">
    <div class="language-object">
        <span class="Language selected" title="English (United States)">
            <span class="text">Eng</span>
        </span>
        <span class="Language" title="Nederlands (Nederland)">
            <a href="http://mylocalwebsite.nl/nl-nl/">
                <span class="text">Ned</span>
            </a>
        </span>
    </div>
</div>

到目前为止，我的解决方案无法正常工作，因为两种语言的文本变得相同，而不是两种:

//get the span.Language title
var getLanguageTitle = $('#languageswitch').children("div").children("span").attr("title");
//insert new spans to show the span titles
$('#languageswitch span').each(function () {
    $(this).append("<span class='text'></span>");
});
$('span.text').append(getLanguageTitle);

我的 jsfiddle 是:http://jsfiddle.net/7tjb1fw7/1/

Answer 1

你把事情搞得太复杂了:

$('.Language').each(function () {
    var txt = $(this).attr('title');
    $(this).append("<span class='text'>" + txt + "</span>");
});

JS Fiddle Demo

---

编辑:如果你想检查一个链接，你可以这样做:

$('.Language').each(function () {
    var txt = "<span class='text'>" + $(this).attr('title') + "</span>",
        link = $('a', this);
    if(link.length){ link.append(txt); }
    else { $(this).append(txt); }
});

JS Fiddle Demo