Change style of multiple elements

to modify a group of elements in the page can be used in javascript
javascript change multiple styles
get all elements inside a div javascript
javascript change css class property
change class of multiple elements
queryselectorall id
how can the style/class of an element be changed
get element by class

I'm trying create a loop (or use .each) to change the style:display property of many DOM elements. My initial thought was to use getElementsByName to select all of the elements that I named 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

But I could not get that method working correctly so I moved onto the .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 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.

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():

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

http://jsfiddle.net/4JCvt/

And if you just want to use vanilla JavaScript, you can do:

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/

How To Modify Attributes, Classes, and Styles in the DOM , Modifying Classes​​ CSS classes are used to apply styles to multiple elements, unlike IDs which can only exist once per page. In JavaScript, we have the className and classList properties to work with the class attribute. element. classList. How to change the Attributes ( Level, Color, Style .etc ) of multiple elements. Background. The first step in changing the attributes of multiple elements is to select those elements to be changed, this can be achieved for example by using the Element Selection or Select By Attributes tool.

This will work

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

or

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

How to Define Styles for Multiple Elements for HTML5 and CSS3 , Style rules are applied in order, so you can always start with the general rule and then modify specific elements later in the style if you wish. If you have multiple  It is also possible to use setAttribute to modify the class of an element. Modifying Styles. The style property repesents the inline styles on an HTML element. Often, styles will be applied to elements via a stylesheet as we have done previously in this article, but sometimes we have to add or edit an inline style directly.

Dynamic style - manipulating CSS with JavaScript, How can the style class of an element be changed? I'm trying create a loop (or use .each) to change the style:display property of many DOM elements. My initial thought was to use getElementsByName to select all of the elements that I named ptext1

element.querySelectorAll, animationstart beforeprint beforeunload blur canplay canplaythrough change click Get the element with id="myDIV" (a div), then get all elements inside div with of the first element with class="example" (index 0) in div x[0].style.​backgroundColor = "red"; For multiple selectors, separate each selector with a comma. The css() method sets or returns one or more style properties for the selected elements. Return a CSS Property To return the value of a specified CSS property, use the following syntax:

Grouping Multiple CSS Selectors in One Style Property, you to style multiple elements without needing additional attributes. a change, you can simply edit a single CSS rule instead of multiple  You can think of a Style as a convenient way to apply a set of property values to multiple elements. You can use a style on any element that derives from FrameworkElement or FrameworkContentElement such as a Window or a Button. The most common way to declare a style is as a resource in the Resources section in a XAML file. Because styles are

WebD2: Understanding ID and Class in CSS, For example, when you added style to the div element that affected all div elements equally. What if you want to stylize some div elements one way, and other div  The style property is used to get as well as set the inline style of an element. When getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute. See the CSS Properties Reference for a list of the CSS properties accessible via style.

Comments
  • Might be a copy/paste error, but there is no space before your name attribute, which will definately affect the workings of selecting by attribute (aside from the fact name is not strictly valid on a p element).
  • Should have quotes around the name- $('td[name="ptext1"]') and the element in the OP is p not td
  • Probably does work for the most part, but read the docs (api.jquery.com/attribute-equals-selector) - quote: "attribute selectors requre quotes around the attribute value"
  • @Jamiec yes i now but if the value is ptext1 it should work also withouth quotes. but i added them anyway :)
  • The line I would like to keep displayed already has a different name so theoretically the first example you gave shouldn't affect it, just like .hide shouldn't affect it (yet it does as it gets hidden). Just to note, I think the plugin I'm using to move the text across the screen (smoothdiv scroll) is messing with the css as the css method does not work, but .hide and .show do.
  • @WillGunn if you are using a plugin it might alter everything in your markup, for example it might create it's own tags. That might be the problem.