, возвращающий все элементы DOM с использованием функции многократного использования

Я хочу, чтобы мои 4 анкерных тега в моем HTML-файле меняли свои свойства css одновременно. Поэтому я создал функцию многократного использования под названием query() в моем JS-файле, чтобы имитировать удивительный механизм выбора DOM-знака в jQuery, используя только простой JS. Внутри функции query() есть цикл, который проверяет длину параметра elem (DOM) и применяет его для получения и возврата индекса каждого введенного элемента DOM. Я был удивлен, что он вернул только первый элемент., возвращающий все элементы DOM с использованием функции многократного использования

function query(elem) { 
    for(var i=0; i<document.querySelectorAll(elem).length; i++) { 
     return document.querySelectorAll(elem)[i]; 
    } 
} 

query('a').style.color = 'yellow';

Я считаю, что проблема связана с объемом return. Я надеюсь, что кто-то может указать или исправить ошибки с моим кодом. Заранее спасибо.

источник

2017-02-22 Anonymous

Вы останавливая функцию после первого цикла. Удалите ключевое слово 'return'. –

Использование 'return' таким образом приведет к выходу из функции, а не к циклу, как вы можете ожидать. Вместо этого вы можете добавить каждый элемент в массив и затем вернуть этот массив. – evolutionxbox

вы возвращаете элемент индекса «i», который вынимает 0 элементов [] –

Нельзя использовать ключевое слово return в цикле for, потому что вы выйдете из функции после первого цикла.

Я предлагаю вам создать новый массив и нажимать каждый найденный элемент внутри него, чтобы иметь возможность манипулировать им.

function query(elem, prop, value) { 
 
    var elems = document.getElementsByTagName(elem); 
 
    var result = []; 
 

 
    for (var i = 0; i < elems.length; i++) { 
 
    result.push(elems[i]); 
 
    result[i].style[prop] = value; 
 
    } 
 
} 
 

 
query('h1', 'color', 'red');

.box { 
 
    height: 50px; 
 
    width: 50px; 
 
    background: green; 
 
    margin: 5px; 
 
}

<div class='box'></div> 
 
<div class='box'></div> 
 
<div class='box'></div> 
 

 
<h1>Hello</h1> 
 
<h1>Hello</h1> 
 
<h1>Hello</h1>

Вы можете использовать также использовать функцию forEach()for вместо петли, для более быстрого результата.

function query(elem) { 
 
    var result = []; 
 
    document.querySelectorAll(elem).forEach(v => result.push(v)); 
 
    console.log(result); 
 
} 
 

 
query('div');

<div class='box'></div> 
 
<div class='box'></div> 
 
<div class='box'></div>

источник

2017-02-22 11:35:38

Большое спасибо за этот отличный совет :) –

, но как я могу вернуть каждый элемент, чтобы изменить их стили? потому что я попытался заменить 'console.log' на« результат возврата »и ничего не изменилось –

Что делать, если я хочу изменить стиль этих трех? –

Я предлагаю вам использовать getElementsByTagName DOM, чтобы не перебрать все элементы DOM Вашей функции Prety нравится эта собственная функция

document.getElementsByTagName (эль);

Проблема с вашей функцией заключается в возврате HTMLCollection, и вы не можете применить стиль к этому.

Я предлагаю это, например:

function query(elem, callback) { 
    var elems = document.getElementsByTagName(elem); 
    for(var i; i < elems.lenght; i++){ 
     callback(elems[i]); 
    } 
} 

query('a', function(a){ 
    a.style.color = 'yellow'; 
})

источник

2017-02-22 11:44:26

' getElementsByTagName'? Что делать, если я хочу выбрать имена классов или идентификаторы типа '.элемент 'или' # element'? –

вы можете создать функции differents или передать это как параметр, я предлагаю это, потому что меньше петли для всех элементов DOM. –

-1

NodeList.prototype.css = function (css) { 
 
\t for (var i=0; i<this.length; i++) 
 
\t \t for (var j in css) 
 
\t \t \t this[i].style[j] = css[j] 
 
} 
 
document.querySelectorAll('a').css({ 
 
\t 'color' : 'yellow', 
 
\t 'background-color' : 'black' 
 
})

<a href="">The Link</a>

источник

2017-02-25 10:55:25 Levon

, возвращающий все элементы DOM с использованием функции многократного использования

ответ

Смежные вопросы