Question

我是初学程序员，我正在尝试选择类数组中的每个元素来设置它们的样式。我已经尝试使用通用选择器public interface MyPopup { void callMe(); }，但这没有用，我还没有找到合适的解决方案。例如

public class MyPopup_IOS : MyPopup
{
    public override void callMe()
    {
    }       
}

Answer 1

在浏览器控制台中尝试此操作。

function getAllLinks() {
    return document.getElementsByTagName('a')
}
var links = getAllLinks()
function colorElements(elements, value) {
    for(var i = 0; i < elements.length; i++) {
        elements[i].style.color = 'red';
    }
}
colorElements(links, 'red')

上面的代码应该获取页面上的所有链接并将其着色为红色。

现在有了更好的ES6 +

// this code requires links from the code above
var allLinks = Array.from(links)
allLinks.forEach(link => link.style.color = 'green')

上面的代码应该采用页面上的所有链接并将它们涂成绿色。

建议：出于可访问性原因，请勿触摸浏览器或用户锚定颜色。

Answer 2

尝试使用jquery循环或javascript循环。在jquery中使用$ .each循环来解析循环元素并将样式应用于每个元素。我在这里使用javascript和jQuery添加了示例代码。

jQuery实现。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
</head>
<body>

<p class="itemclass">Element 1.</p>

<p class="itemclass">Element 2.</p>

<p class="itemclass">Element 3.</p>

<button onclick="myFunction()">Try it</button>


<script>
function myFunction() {
    var items = document.getElementsByClassName("itemclass");
    $.each(items, function(index, item){
	item.style.backgroundColor = "red";
    });
}
</script>

</body>
</html>

Javascript实施

<!DOCTYPE html>
<html>
<body>

<p class="itemclass">Element 1.</p>

<p class="itemclass">Element 2.</p>

<p class="itemclass">Element 3.</p>

<button onclick="myFunction()">Try it</button>


<script>
function myFunction() {
    var items = document.getElementsByClassName("itemclass");
	var loopVar = 0;
	var loopLength = items.length;
        for(loopVar = 0; loopVar < loopLength; loopVar++){
	    items[loopVar].style.backgroundColor = "red";
	}
}
</script>

</body>
</html>

Answer 3

来自https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName

[ document.getElementsByClassName ]返回具有所有给定类名的所有子元素的类数组对象。

您需要指定要选择的类，然后您必须遍历返回数组中的每个元素。

假设你有这个HTML：

<p class="foo">Hello</p>
<p class="foo">World</p>

然后你在JavaScript中需要这样的东西：

var foo_items = document.getElementsByClassName("foo");
for(var i = 0; i < foo_items.length; i++) {
    foo_items[i].style.color = "#eee";
}

当然，如果您使用的是jQuery，可以将其简化为

$(".foo").css("color", "#eee")

如何选择元素列表中的每个元素

3 个答案: