javascript 从列表中获取图片答案

【问题标题】：javascript get images from listjavascript 从列表中获取图片
【发布时间】：2015-12-06 06:53:27
【问题描述】：

<ul class="">
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
</ul>

我对 jquery 有很好的了解，我知道我可以使用 children 或 find 或直接使用它来做到这一点。但我想学习 javascript，并且想用 js 来做。我想从所有列表中选择图像标签，但我无法做到，请你简要解释一下。我想尽快学习 js 以换工作，你能帮忙吗..

我尝试过的代码

var i;     
var parent = document.getElementById('right');
var lis = par.getElementsByTagName('p');
for(i=0;i<lis.length;i++){
//wat to do here

}

【问题讨论】：

代码将 b ul > li*5 > images

标签： javascript jquery html arrays

【解决方案1】：

您需要进行一些更改，例如，

var i;
var parent = document.getElementById('right');
var lis = parent.children;
for (i = 0,l=lis.length; i < l; i++) {
  //wat to do here
  // getting alt for example
  console.log(lis[i].children[0].getAttribute('alt'));
}

<ul id="right">
  <li>
    <img src="" alt="1" />
  </li>
  <li>
    <img src="" alt="2" />
  </li>
  <li>
    <img src="" alt="3" />
  </li>
  <li>
    <img src="" alt="4" />
  </li>
  <li>
    <img src="" alt="5" />
  </li>
  <li>
    <img src="" alt="6" />
  </li>
  <li>
    <img src="" alt="7" />
  </li>
</ul>

ul 中的另一个标签名称选项，

var parent = document.getElementById('right');
var lis = parent.getElementsByTagName('img'); // get img tags in ul
for (i = 0,l=lis.length; i < l; i++) {
  //wat to do here
  // getting alt for example
  console.log(lis[i].getAttribute('alt'));
}

【讨论】：

【解决方案2】：

您可以使用querySelectorAll 获取父级中的所有图像并对其进行迭代。

querySelectorAll()

返回文档中匹配指定选择器组的元素列表（使用文档节点的深度优先前序遍历）。返回的对象是一个 NodeList。

var images = document.querySelectorAll('#right img');
// Get all the images

// Iterate over all the images
for (i = 0; i < images.length; i++) {
  // Update individual image
  if (images[i].width < 400) {
    // Do something
  }
}

img {
  width: 50%;
}

<ul id="right">
  <li>
    <img src="" alt="" />
  </li>
  <li>
    <img src="" alt="" />
  </li>
  <li>
    <img src="" alt="" />
  </li>
  <li>
    <img src="" alt="" />
  </li>
  <li>
    <img src="" alt="" />
  </li>
  <li>
    <img src="" alt="" />
  </li>
  <li>
    <img src="" alt="" />
  </li>
</ul>

【讨论】：

什么是我有这样的代码

我只想从 p 元素中选择图像
你可以使用document.querySelectorAll('#someid p img')，到querySelectorAll你可以通过CSS选择器
是的，它在数组中选择了图像，现在只是尝试获取它的宽度并在宽度小于 400 时做一些事情
@DeepakSabharwal 检查更新的代码，我添加了if 条件
谢谢@tushar ..我想我应该向你上课 :D 顺便说一句我尝试这样但卡住了 var im = document.querySelectorAll('#right p img') 控制台。 log(im) for(var i=0;i

【解决方案3】：

html:

<ul class="parent">
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
</ul>

js:

$element = document.querySelector('.parent');

var childs = $element.children;
for (var i = 1; i < childs.length - 1; i++)
{
        console.log(childs[i].querySelector('img'))
}

【讨论】：