Question

我目前有以下代码搜索该类并将替换该文本。

如果父标签是“＃thumb-hockey-top”，我将如何调整它以便仅替换文本？

window.onload = function(){
     //this captures all the elements with the spec classes
     var soldItems = document.getElementsByClassName('product-mark sold-out');

     //this changes each element 1 by 1 to new text
        for(var i=0; i<soldItems.length; i++){
           soldItems[i].innerHTML = "Coming Soon";
        }

}

Answer 1

＆＃13;

window.onload = function(){
  //this captures all the elements with the spec classes
  //just use a class
  var soldItems = document.getElementsByClassName('sold-out');
  //this changes each element 1 by 1 to new text
  //var parentnode = document.getElementById('thumb-hockey-top') 
    for(var i=0; i<soldItems.length; i++){
      if(soldItems[i].parentNode.id=='thumb-hockey-top'){
         soldItems[i].innerHTML = "Coming Soon";
      }
    }
};

＆＃13;

<div id="thumb-hockey-top">
    <div class="product-mark sold-out"></div>
    <div class="product-mark sold-out"></div>
    <div class="product-mark sold-out"></div>
</div>

＆＃13;

Answer 2

您可以使用parentElement属性获取元素的父元素。然后检查它的ID。

var soldItem = soldItems[i];
if (soldItem.parentElement.id == "thumb-hockey-top") {
    // do your thing
}

Answer 3

使用一次

window.onload = function(){
     //this captures all the elements with the spec classes
     var soldItems = document.getElementById("thumb-hockey-top").getElementsByClassName('product-mark sold-out');

     //this changes each element 1 by 1 to new text
        for(var i=0; i<soldItems.length; i++){
          soldItems[i].innerHTML = "Coming Soon"
        }

}

<div id="thumb-hockey-top">
  <div class="product-mark sold-out"></div>
</div>
<div class="product-mark sold-out"></div>
<div class="product-mark sold-out"></div>

多次使用

function myF(a, b){
  // a = Id of parent element
  // b = Class Name of element which you want to hack
  var soldItems = document.getElementById(a).getElementsByClassName(b);

  for(var i=0; i<soldItems.length; i++){
    soldItems[i].innerHTML = "Coming Soon"
  }
}
myF("thumb-hockey-top", "product-mark sold-out");
myF("thumb-hockey-bottom", "product-unmark sold-out");

<div class="example1">
  <div id="thumb-hockey-top">
    <div class="product-mark sold-out">EXAMPLE 1</div>
  </div>
  <div class="product-mark sold-out">EXAMPLE 1</div>
</div>

<div class="example2">
  <div id="thumb-hockey-bottom">
    <div class="product-unmark sold-out">EXAMPLE 2</div>
  </div>
  <div class="product-unmark sold-out">EXAMPLE 2</div>
</div>

使用innerHTML仅在父div中选择类

3 个答案: