jQuery選擇器 - 更優雅的解決方案

Question

給出以下HTML片段：

<div class="word">
    <input type="text" name="A" />
    <input type="text" name="n" />
</div>
<div class="word">
    <input type="text" name="E" />
    <input type="text" name="x" />
    <input type="text" name="a" />
    <input type="text" name="m" />
    <input type="text" name="p" />
    <input type="text" name="l" />
    <input type="text" name="e" />  
</div>

我想編寫一個jQuery腳本，它將所有':text'元素的名稱連接在一個字符串中，同時在到達'div.word'元素的末尾時添加一個空格。

例如，給定上面的HTML，結果將是：

An Example

使用我（非常）有限的jQuery / javascript技能我設法找到了一個解決方案，但它涉及到for ... in循環中的臟，所以我寧願不在這里顯示它:-)。

我想知道什么是這個問題更優雅/慣用（可能更簡潔）的解決方案。

Answer 1

這是一個演示： http ： //jsfiddle.net/ZRukk/1/

var string = $('.word input').map(function() {
    var is_last = $(this).is(':last-child');
    return this.name + (is_last ? ' ' : '');
}).toArray().join('');

---

在現代瀏覽器中，你可以不用像這樣的jQuery來做...

這是一個演示： http ： //jsfiddle.net/ZRukk/4/

var inputs = document.querySelectorAll('.word input');

var string = [].map.call(inputs, function(el) {
    return el.name + (!el.nextElementSibling ? ' ' : '');
}).join('');

Answer 2

你可以這樣做：

var result = [];
$('.word').each(function() {
    $(this).find('input').each(function() {
        result.push(this.name);
    });
    result.push(' ');
});
var answer = $.trim(result.join(''));

這里的工作示例： http ： //jsfiddle.net/jfriend00/DNWSm/

並且，稍微不同的方式可能更快，因為它可能更少的DOM搜索：

var result = [];
var lastParent;
$('.word input').each(function() {
    // if starting a new parent, add a word separator
    if (lastParent && lastParent != this.parentNode) {
        result.push(' ');
    }
    result.push(this.name);
    lastParent = this.parentNode;
});
var answer = result.join('');

這里的工作示例： http ： //jsfiddle.net/jfriend00/bEBGQ/