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/

jQuery选择器 - 更优雅的解决方案

2 个答案: