Question

我正在尝试创建一个循环（或使用.each）来更改许多DOM元素的style:display属性。我最初的想法是使用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>

使用

 var TextElements = document.getElementsByName("ptext1");

制作名称为ptext1

的所有元素的对象/数组

但是我无法正确使用该方法，因此我转到了.each。

两者

$.each(TextElements, function (index) {
    this.style.display="none";
});

和

$('td[name=ptext1]').each(function (index) {
    this.style.display="block";
});

似乎没有正常工作（我一直在测试它是否使用警报运行）。

现在，如果有人能够看到我的错误所在，或者建议采用更好的方法，那我就听见了。这应该是一个简单的操作，但由于某些原因我每次尝试都会失败。

编辑： $('p[name=ptext1]').hide()和$('p[name=ptext1]').show() 正在工作，除了.hide（）也隐藏了我想隐藏的那条线，

<p id="ptext0"name="ptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>

每一行都有一个不同的id标签，但是我试图使用name标签来跟踪我想隐藏哪些，但是应该保留的行（name =“ptext”）也会隐藏。

Answer 1

为什么不简单地使用：

$('p[name="ptext1"]').css( 'display', 'none');// you can use block...

如果您想显示一行，请使用.not()排除该行：

$('p[name="ptext1"]').not('#ptext3').css( 'display', 'none');// you can use block...

http://jsfiddle.net/4JCvt/

如果你只想使用vanilla JavaScript，你可以这样做：

var TextElements = document.getElementsByName("ptext1");

for (var i = 0, max = TextElements.length; i < max; i++) {
    TextElements[i].style.display = "none";
}

http://jsfiddle.net/4JCvt/2/

Answer 2

将其与 JQuery 一起使用：

$("[name='ptext1']").css("display", "value");
//change value to the display value you want
//$("[name='ptext1']").css("display", "block");

纯 JavaScript：

var elements = document.getElementsByName("ptext1");
for (var i = 0; i < elements.length; i++) {
 elements[i].style.display = "value";
}
//also change value to display value wanted.

Answer 3

这将有效

jQuery("*[name$='ptext1']").css( 'display', 'block');

或

jQuery("*[name$='ptext1']").css( 'display', 'none');

Answer 4

这很简单，适用于IE8。只需将所有<p>元素添加到名为“myDiv”的<div>

即可

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";    }
}

如果您要更改<div>中的所有（“*”）元素，请使用：
```
var y = x.getElementsByTagName("*");
```

如果您想更改<P>中的第二个<div>元素，请使用：

x.getElementsByTagName("p")[1].style.backgroundColor = "red";

它类似于数组。

Answer 5

我认为一种更简单的方法是在您的HTML元素中添加一个类

<p class='myclass'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class='myclass'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class='myclass'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

然后在JavaScript中，您可以按以下方式更改样式：

$('.myclass').css('display', 'none');

改变多个元素的风格

5 个答案: