Question

要评估我的问题，我需要在Vanilla JavaScript中添加一个类img标记的方法，该标记的执行取决于img标记属于哪个div类 - 如果class包含“框，我需要向img添加parentNode。”

这是我的代码的简化示例：

<div class="example first">
 <h2><a>sample text</a></h2>
  <img src="./img/sample.png" />
 <p>sample text</p>
</div>

<div class="example box">
 <h2><a>sample text</a></h2>
  <img src="./img/sample.png" />
 <p>sample text</p>
</div>

<div class="example box">
 <h2><a>sample text</a></h2>
  <img src="./img/sample.png" />
 <p>sample text</p>
</div>




var div = document.getElementsByTagName("div");
var img = document.getElementsByTagName("img");

var i;
for (i = 0; i < div.length; i++){
if (div[i].classList.value.indexOf("example") > -1){
    div[i].classList.add("style-1");

if (div[i].classList.value.indexOf("box") > -1){
    div[i].classList.add("style-2");
    div[i].classList.remove("style-1");

for (i = 0; i < img.length; i++){
    img[i].classList.add("img-class");
     }
   }
 }
}

此代码类型提供了所需的结果，但是，它将img-class应用于所有classList标记的img，即使父div不包含box在classList;例如img-class也适用于类example first的div。

它还会删除在classList中包含example box的第一个div之后添加到div的classList的类。

实施例

<div class="example first style-1">
 <h2><a>sample text</a></h2>
  <img class="img-class" src="./img/sample.png" /> /* UNWANTED CLASS APPLIED */
 <p>sample text</p>
</div>

<div class="example box style-2">
 <h2><a>sample text</a></h2>
  <img class="img-class" src="./img/sample.png" />
 <p>sample text</p>
</div>

<div class="example box"> /* NO CLASS APPLIED WHEN SHOULD BE */
 <h2><a>sample text</a></h2>
  <img class="img-class" src="./img/sample.png" />
 <p>sample text</p>
</div>

虽然期望的结果是：

<div class="example first style-1">
 <h2><a>sample text</a></h2>
  <img src="./img/sample.png" /> /*NO CLASS APPLIED*/
 <p>sample text</p>
</div>

<div class="example box style-2">
 <h2><a>sample text</a></h2>
  <img class="img-class" src="./img/sample.png" />
 <p>sample text</p>
</div>

<div class="example box style-2"> /* STYLE APPLIED */
 <h2><a>sample text</a></h2>
  <img class="img-class" src="./img/sample.png" />
 <p>sample text</p>
</div>

我也尝试过以下JavaScript，但没有占上风：

var parentNodeImg = img.parentNode;
if (parentNodeImg.classList.value.indexOf("box") > -1){
  img.classList.add("img-class");
}

提前致谢！我知道这里有一点，我尽可能地改进它。

Answer 1

您可以使用document.querySelectorAll仅查询具有类img的div中的box个标记，并将该类仅添加到这些元素

var selectedImgTags = document.querySelectorAll('.box > img');

selectedImgTags.forEach(function(el) {
  el.className += ' magic';
})

/* Adding this to illustrate the difference visually in the output */
.magic {
  border: 1px solid red;
}

<div class="example first">
  <h2><a>sample text</a></h2>
  <img src="./img/sample.png" />
  <p>sample text</p>
</div>

<div class="example box">
  <h2><a>sample text</a></h2>
  <img src="./img/sample.png" />
  <p>sample text</p>
</div>

<div class="example box">
  <h2><a>sample text</a></h2>
  <img src="./img/sample.png" />
  <p>sample text</p>
</div>

Answer 2

你可以在javascript中应用以下代码

var boxes = document.querySelectorAll('.box');
boxes.map(function(box){
var img = box.querySelector("img");
img.classList.add("img-class");
 });

Answer 3

用你的代码玩了一下后，
这是一个工作片段：
（我为可见性添加了CSS）

var div = document.getElementsByTagName("div");
var i, j, img;

for (i = 0; i < div.length; i++) {
  if (div[i].classList.contains("example")) {
    div[i].classList.add("style-1");

    if (div[i].classList.contains('box')) {
      div[i].classList.add("style-2");
      div[i].classList.remove("style-1");
      
      img = div[i].getElementsByTagName("img");
      for (j = 0; j < img.length; j++) {
        img[j].classList.add("img-class");
      }
    }
  }
}

.style-1 {
  background: #aaa;
}

.style-2 {
  border: 1px solid black;
}

.img-class{
  background: red;
}

<div class="example first">
  <h2><a>sample text</a></h2>
  <img src="./img/sample.png" />
  <p>sample text</p>
</div>

<div class="example box">
  <h2><a>sample text</a></h2>
  <img src="./img/sample.png" />
  <p>sample text</p>
</div>

<div class="example box">
  <h2><a>sample text</a></h2>
  <img src="./img/sample.png" />
  <p>sample text</p>
</div>

我尝试不改变您的代码，但使用contains()检查是否存在类。

请注意，您在第二个循环中使用变量i，我使用j替换它，因为它导致了一些故障。

希望它有所帮助。

Answer 4

您应该使用classList而不是常用的className.split(' ')

您可以在下面看到一个实际操作示例：

var images = document.querySelectorAll('img');

images.forEach(img => {
  var clss = img.parentNode.classList;
  
  clss.forEach(cls => {
    if (cls == 'box') {
      img.classList.add('img-class');
    }
  });
});

.img-class {
  border: 3px solid red;
}

<div class="example first style-1">
  <h2><a>sample text</a></h2>
  <img src="http://via.placeholder.com/50x50" />
  <p>sample text</p>
</div>

<div class="example box style-2">
  <h2><a>sample text</a></h2>
  <img src="http://via.placeholder.com/50x50" />
  <p>sample text</p>
</div>

<div class="example box">
  <h2><a>sample text</a></h2>
  <img src="http://via.placeholder.com/50x50" />
  <p>sample text</p>
</div>

Answer 5

不是通过每个div，而是只能通过你想要的类迭代：

let divs = document.getElementsByClassName('box');
for (let i = 0; i < divs.length; i++) {
    if (divs[i].tagName === 'DIV') {/* Get your imgs and add class to them */}
}

你可以通过以下方式获得给定div的所有img孩子：

let imgs = divElement.getElementsByTagName('img');

仅当其parentNode（div）具有某个className时才将类添加到<img/>？ - 没有jQuery

5 个答案: