更改 class 个元素

Question

我想根据浮动元素的数量来设置浮动元素。

<div id="whatever">
   <div class="iwantthischangedto3elements">
      <a href="#">element 1</a>
      <a href="#">element 2</a>
      <a href="#">element 3</a>
   </div>
   <div class="iwantthischangedto2elements">
      <a href="#">element 1</a>
      <a href="#">element 2</a>
   </div>
</div>

我真的不知道该怎么做。我猜 javascript 是答案，但无法正常工作：

<script type="text/javascript">
function f() {
  var list = document.getElementById("whatever");
  var nbofelements = whatever.getElementsByTagName("a").length;
  return nbofelements ; 
  whatever.getElementsByTagName("div").className += "elements + nbofelements";      
}
</script>

感谢您的帮助，我真的很难 javascript...

编辑： 谢谢大家的回答。对不起，我没有说清楚，英语不是我的母语。

Tambo 明白我的意思，代码运行良好。

但是我忘记了一件事... "h1" 有时可以放在 "a" 列表之前，不应算作一个元素。可能还有其他 "h2"、"h3" 等等...我只想计算 "a" 个元素...

     <div id="whatever">
       <div class="iwantthischangedto3elements">
          <h1>Do no not count this</h1>
          <a href="#">element 1</a>
          <a href="#">element 2</a>
          <a href="#">element 3</a>
       </div>

知道如何进行吗？干杯文森特

Answer 1

您可以使用for loop and Element.classList添加class

var whateverChild = document.querySelectorAll("#whatever div");

for(var i = 0; i < whateverChild.length; i++) {
  //var anchor = document.querySelectorAll(whateverChild);
  if(whateverChild[i].childElementCount == 2){
    whateverChild[i].classList.add("two")
  }else if(whateverChild[i].childElementCount == 3){
    whateverChild[i].classList.add("three")
  }
}

.two a{color: green}
.three a{color: red}

<div id="whatever">
   <div class="iwantthischangedto3elements">
      <a href="#">element 1</a>
      <a href="#">element 2</a>
      <a href="#">element 3</a>
   </div>
   <div class="iwantthischangedto2elements">
      <a href="#">element 1</a>
      <a href="#">element 2</a>
   </div>
</div>

如果你有一个段落，你可以使用这个

var whateverChild = document.querySelectorAll("#whatever div");

for(var i = 0; i < whateverChild.length; i++) {
 var anchorLength = whateverChild[i].querySelectorAll("a").length;
 if(anchorLength == 2){
    whateverChild[i].classList.add("two")
  }else if(anchorLength == 3){
    whateverChild[i].classList.add("three")
  }
  
}

.two a{color: green}
.three a{color: red}

<div id="whatever">
   <div class="iwantthischangedto3elements">
      <a href="#">element 1</a>
      <p> i am a paragraph </p>
      <a href="#">element 2</a>
      <a href="#">element 3</a>
   </div>
   <div class="iwantthischangedto2elements">
      <a href="#">element 1</a>
      <a href="#">element 2</a>
   </div>
</div>

您可以将代码缩减为这样

var numbersArray  = ["zero", "one", "two", "three", "four", "five"],
    whateverChild = document.querySelectorAll("#whatever div");

for(var i = 0; i < whateverChild.length; i++) {
 var anchorLength = whateverChild[i].querySelectorAll("a").length;
  
    whateverChild[i].classList.add(numbersArray[anchorLength])
  
}

.zero{color: orange}
.one{color: blue}
.two a{color: green}
.three a{color: red}
.four{color: purple}
.five{color: beige;}

<div id="whatever">
   <div class="iwantthischangedto3elements">
      <a href="#">element 1</a>
      <p> i am a paragraph </p>
      <a href="#">element 2</a>
      <a href="#">element 3</a>
   </div>
   <div class="iwantthischangedto2elements">
      <a href="#">element 1</a>
      <a href="#">element 2</a>
   </div>
</div>

更改 class 个元素

Changing class of elements

javascript

css

getelementbyid

getelementsbyclassname