编写将根据HTML内容创建数组的脚本

Question

我基本上需要编写一个包含数字的数组，这些数字与正文中容器中的元素数量相匹配，这样如果我在特定div中有20个图像，我的脚本将创建以下内容：

with cte(id, name, age) as (select 11, 'James', 22 from dual) select s.id, decode(s.name, t.name, null, 'Name mismatch') name_check, decode(s.age, t.age, null, 'Age mismatch') age_check from supplier s inner join cte t on s.id = t.id where s.id = 11;

我怎样才能获得javascript到＆＃34; count＆＃34;元素（在这种情况下带有id的图像）并创建一个长度匹配的数组？

Answer 1

首先使用选择器'img[id]'获取具有ID的图像元素，然后将元素数组映射到ID数组中：

function getId(elem) {
   return parseInt($(elem).attr('id'));
   }
const ids = $('img[id]').toArray().map(getId);

测试出来：
https://jsfiddle.net/pcL426w2/2

jQuery使代码更紧凑，但你可以轻松地使用直接的JavaScript做同样的事情。

Answer 2

使用Pure JS：

＆＃13;

＆＃13;

var imgs = document.getElementsByTagName('img');
var ids = [];
var i = imgs.length;
var id;
while (i--) //until reaches zero
  if (id = imgs[i].id) //note assignment n condition
    ids.unshift(id); //add
console.log('image ids', ids);

＆＃13;

<img />
<img id='1' />
<img />
<img id='a' />
<img id='foo' />
<img />
<img id='bar' />

＆＃13;

＆＃13;

＆＃13;

使用jQuery：

＆＃13;

＆＃13;

var ids = $('img[id]').map(function() {
  return this.id;
}).get();
console.log('image ids', ids);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img />
<img id='1' />
<img />
<img id='a' />
<img id='foo' />
<img />
<img id='bar' />

＆＃13;

＆＃13;

＆＃13;