6

我正在尝试创建一个循环（或使用.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>

使用

 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="ptext") 也会隐藏。

4

4 回答 4

12

你为什么不简单地使用：

$('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/

于 2012-06-25T10:06:27.197 回答
3

将此与 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.
于 2021-06-04T10:24:51.703 回答
0

这将起作用

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

或者

jQuery("*[name$='ptext1']").css( 'display', 'none');
于 2012-06-25T10:08:21.360 回答
0

这很简单，并且适用于 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";    }
}

  • 如果要更改 中的所有 ("*") 元素，请<div>使用：

    var y = x.getElementsByTagName("*");

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

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

它类似于数组。

于 2015-03-17T00:19:25.140 回答