0

我需要检查另一个类的块内是否存在一个类。块可以很多。嵌套可以是任意的。请告诉我我做错了什么。完整代码在这里https://codepen.io/BK-wmg12/pen/vdjxav 提前谢谢你:-)

    <head>
<style>
    .red {
        background-color: red;
    }
 </style>
</head>
<body>
<body>
 <div class="test">
   <div class="my">
     <span class="split1">
       Some TEXT1
     </span>

    </div>
   <div class="my">
         <span >
       Some TEXT2
     </span>

    </div>
   <div class="my">
       <span class="split1">
       Some TEXT3
     </span>
<script>
    var els = document.getElementsByClassName('my');
    for( var i = 0; i < els.length; i++ ) {
        for( var j = 0; j < els[i].length; j++ ){

            if( !els[i].childNodes[j].classList.contains('split1') ){
                els[i].childNodes[j].classList.add('red');
            }
        }

    }
</script>

</body>
4

2 回答 2

0

您的代码基本上有两个问题：

1）你需要子节点的长度

for( var j = 0; j < els[i].childNodes.length; j++ )

2）您需要检查子节点是否不是简单的文本

els[i].childNodes[j].nodeName !== "#text"

或者你甚至可以检查它是否是一个跨度

els[i].childNodes[j].nodeName === "span"

源代码如下：

var els = document.getElementsByClassName('my');
for( var i = 0; i < els.length; i++ ) {
  console.log(els[i].childNodes)
    for( var j = 0; j < els[i].childNodes.length; j++ ){
    if(els[i].childNodes[j].nodeName !== "#text" && !els[i].childNodes[j].classList.contains('split1') ){
            els[i].childNodes[j].classList.add('red');
        } 
    }

}

Codepen 供参考：https ://codepen.io/YasirKamdar/pen/paVwrG

于 2018-02-21T10:44:39.007 回答
0

我需要检查另一个类的块内是否存在一个类

利用querySelector

var isPresent = !!document.querySelector( ".my .split1" )

现在迭代所有（使用querySelectorAll）

isPresent && Array.from( document.querySelectorAll( ".my .split1" ) ).forEach( function(ele){
   ele.classList.add('red');
})

演示

var isPresent = !!document.querySelector(".my .split1")


isPresent && Array.from(document.querySelectorAll(".my .split1")).forEach(function(ele) {
  ele.classList.add('red');
})
.red 
{
  background-color: #f00;
}
<div class="test">
  <div class="my">
    <span class="split1">
       Some TEXT1
     </span>

  </div>
  <div class="my">
    <span>
       Some TEXT2
     </span>

  </div>
  <div class="my">
    <span class="split1">
       Some TEXT3
     </span>
  </div>
</div>

于 2018-02-21T10:30:52.577 回答