javascript 更改多个元素的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11187195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change style of multiple elements
提问by Will Gunn
I'm trying create a loop (or use .each) to change the style:displayproperty of many DOM elements. My initial thought was to use getElementsByNameto select all of the elements that I named ptext1:
我正在尝试创建一个循环（或使用.each）来更改style:display许多 DOM 元素的属性。我最初的想法是用来getElementsByName选择我命名的所有元素ptext1：
<p id="ptext0"name="ptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p id="ptext1"name="ptext1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p id="ptext2"name="ptext1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p id="ptext3"name="ptext1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p id="ptext4"name="ptext1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p id="ptext5"name="ptext1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p id="ptext6"name="ptext1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
using
使用
var TextElements = document.getElementsByName("ptext1");
To make an object/array of all of the elements with the name ptext1
使用名称创建所有元素的对象/数组 ptext1
But I could not get that method working correctly so I moved onto the .each.
但是我无法使该方法正常工作，因此我转到了.each.
Both
两个都
$.each(TextElements, function (index) {
this.style.display="none";
});
and
和
$('td[name=ptext1]').each(function (index) {
this.style.display="block";
});
Didn't seem to work properly (I've been testing whether it runs using alerts).
似乎没有正常工作（我一直在测试它是否使用警报运行）。
Now if anyone can see where my mistake is or suggest a better method I am all ears. This SHOULD be a simple operation but for some reason each time I try, it fails.
现在，如果有人能看到我的错误在哪里或提出更好的方法，我会全神贯注。这应该是一个简单的操作，但由于某种原因，我每次尝试都失败了。
Edit:
$('p[name=ptext1]').hide()and $('p[name=ptext1]').show()are working except .hide() also hides the line above the ones I would like to hide,
编辑：
$('p[name=ptext1]').hide()并且$('p[name=ptext1]').show()正在工作，除了 .hide() 还隐藏了我想隐藏的行上方的行，
<p id="ptext0"name="ptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
Each line has a different id tag, but I am trying to use the name tag to keep track of which ones I would like to hide, yet the line that should remain (name="ptext") also hides.
每一行都有一个不同的 id 标签，但我试图使用名称标签来跟踪我想隐藏哪些行，但应该保留的行 (name="ptext") 也隐藏了。
回答by Nicola Peluchetti
Why don't you simply use:
你为什么不简单地使用：
$('p[name="ptext1"]').css( 'display', 'none');// you can use block...
If you want to keep a line shown, exclude that line with .not():
如果要保留显示的行，请使用以下命令排除该行.not()：
$('p[name="ptext1"]').not('#ptext3').css( 'display', 'none');// you can use block...
And if you just want to use vanilla JavaScript, you can do:
如果您只想使用 vanilla JavaScript，您可以这样做：
var TextElements = document.getElementsByName("ptext1");
for (var i = 0, max = TextElements.length; i < max; i++) {
TextElements[i].style.display = "none";
}
回答by hriziya
This will work
这将工作
jQuery("*[name$='ptext1']").css( 'display', 'block');
or
或者
jQuery("*[name$='ptext1']").css( 'display', 'none');
回答by Jarek Lotz
This is easy, and works with IE8. Just put all your <p>elements to <div>named "myDiv"
这很容易，并且适用于 IE8。只需将所有<p>元素都<div>命名为“myDiv”
function myFunction() {
var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("P");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.display="none"; }
}
If you want to change all ("*") elements in your
<div>, use:var y = x.getElementsByTagName("*");If you want to change second
<P>element in your<div>, use:x.getElementsByTagName("p")[1].style.backgroundColor = "red";
如果要更改 中的所有 ("*") 元素，请
<div>使用：var y = x.getElementsByTagName("*");如果要更改 中的第二个
<P>元素，请<div>使用：x.getElementsByTagName("p")[1].style.backgroundColor = "red";
It's similar to an array.
它类似于数组。
