我想根据 float 元素的数量来设置 float 元素。
<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>
知道如何进行吗? 干杯 文森特
最佳答案
您可以使用 for loop和 Element.classList添加类
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>
关于javascript - 改变元素的类别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28414426/