Question

Given the following HTML fragment:

<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>

I’d like to write a jQuery script that would concatenate all the ':text' elements’ names in a single string, while adding a space when reaching the end of a 'div.word' element.

For example, given the HTML above, the result would be:

An Example

Using my (very) limited jQuery/javascript skills I managed to find a solution, but it involves dirty for ... in loops, so I’d rather not show it here :-).

I’d like to know what is a more elegant/idiomatic (and probably more concise) solution to this problem.

Answer 1

Here’s a DEMO: 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('');

---

In modern browsers, you could do it without jQuery like this…

Here’s a DEMO: http://jsfiddle.net/ZRukk/4/

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

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