JS/jQuery - Массив из Dom-элементов

361
22 октября 2017, 23:43

Есть такой код в HTML:

<div id="slider">
  <img src="images/user1.jpg" style="opacity:0.5" width="90px" height="90px">
  <img src="images/user2.jpg" width="90px" height="90px">
  <img src="images/user3.jpg" style="opacity:0.5" width="90px" height="90px">
</div>

Как сделать из этих изображений массив на JS/JQ?

Answer 1
  1. JavaScript

var container = document.getElementById("slider"); 
console.log(Array.from(container.children));
<div id="slider"> 
  <img src="images/user1.jpg" style="opacity:0.5" width="90px" height="90px"> 
  <img src="images/user2.jpg" width="90px" height="90px"> 
  <img src="images/user3.jpg" style="opacity:0.5" width="90px" height="90px"> 
</div>

  1. jQuery

console.log($("#slider").children().toArray())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slider"> 
  <img src="images/user1.jpg" style="opacity:0.5" width="90px" height="90px"> 
  <img src="images/user2.jpg" width="90px" height="90px"> 
  <img src="images/user3.jpg" style="opacity:0.5" width="90px" height="90px"> 
</div>

Answer 2
var imgArray = [];
$.each($('div#slider img'), function (index, element){
 imgArray.push($(element).attr('src'));
});
console.log(imgArray);
READ ALSO
Scroll к элементу при загрузке страницы
javascript

Scroll к элементу при загрузке страницы

В браузере firefox, все работает хорошо при загрузке страницы все скролится к нужному элементу, но в webkit не работает, только если вызывать через...

 355
Адаптивное меню на js
javascript

Адаптивное меню на js

Нигде не нашёл как сделать адаптивное меню на чистом js(Cкриншоты ниже)

 668
Как улучшить функцию
javascript

Как улучшить функцию

 363
как изменить функцию?
javascript

как изменить функцию?

Подскажите как изменить функцию:

 301