Селекторы jQuery - более элегантное решение - PullRequest
3 голосов
/ 06 февраля 2012

Учитывая следующий фрагмент 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, поэтому я бы не хотел показывать это здесь: -).

Я хотел бы знать, что является более элегантным / идиоматическим (и, возможно, более кратким)Решение этой проблемы.

Ответы [ 2 ]

4 голосов
/ 06 февраля 2012

Вот ДЕМО: 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('');
1 голос
/ 06 февраля 2012

Вы можете сделать это так:

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/

И, немного другой способ сделать это, вероятно, быстрее, потому что, вероятно, меньше DOMsearch:

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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...