admin管理员组

文章数量:1399984

In the given code below, the div#item-1 of the div#parent-1 was only hidden.

But how can i do that by specifying the parent?

AND

How can i do that by hiding both the #item-1 element?

function HideElement(id)
{
	var doc = document.getElementsByClassName(id);
    doc.style.visibility = 'hidden';
}

HideElement('item-1');

#parent-1
{
  background: red;
}

#parent-2
{
  background: blue;
}

<div id="parent-1">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
</div>

<div id="parent-2">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
</div>

In the given code below, the div#item-1 of the div#parent-1 was only hidden.

But how can i do that by specifying the parent?

AND

How can i do that by hiding both the #item-1 element?

function HideElement(id)
{
	var doc = document.getElementsByClassName(id);
    doc.style.visibility = 'hidden';
}

HideElement('item-1');

#parent-1
{
  background: red;
}

#parent-2
{
  background: blue;
}

<div id="parent-1">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
</div>

<div id="parent-2">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
</div>

UPDATE

I replace the child element id attribute to class but the problem is how can i access the style property of the element?

I've got this error:

Uncaught TypeError: Cannot set property 'visibility' of undefined

• javascript
• html

Share Improve this question Follow edited Sep 13, 2016 at 11:11 Shift 'n Tab asked Sep 13, 2016 at 10:54 Shift 'n TabShift 'n Tab 9,4531414 gold badges7979 silver badges123123 bronze badges 5

• 2 Same ids within a same page?? – Hassan Commented Sep 13, 2016 at 10:56
• 1 id attribute should be unique across your whole page, so you have to change the second item-1, item-2 and item-3 (children of parent-2) occurrences to something else (or use class instead) to make it work properly. – mdziekon Commented Sep 13, 2016 at 10:56
• oh it is possible right? – Shift 'n Tab Commented Sep 13, 2016 at 10:57
• oh thanks for pointing out – Shift 'n Tab Commented Sep 13, 2016 at 10:57
• 1 using plain old javascript, you can do something along the lines of document.getElementById('someId').querySelector(`[data-id='${someId}']`) if you take the data-id approach. Something similar is possible with class names and ids, but as mentioned above, don't reuse ids. – Dan Commented Sep 13, 2016 at 11:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

edit: I've taken some of the remendations in the ments and put them into this answer.

You're better off using class or data- attributes instead of ids. As pointed out ids should be unique, so there can be only one of each on a page. Consider the following html & js:

<div id="parent-1">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
</div>

<div id="parent-2">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
</div>

css:

.item-hidden{
  visibility: hidden;
}

javascript:

function hideElement(selector){

  var items = document.querySelectorAll(selector);

  for(var i = 0, l = items.length; i < l; ++i){
    items[i].classList.add('item-hidden');
  }

}

//usage:
hideElement('.item-1'); // will hide all '.item-1' elements
hideElement('#parent-1 div'); // will hide all <div>s inside of #parent-1

querySelectorAll() reference

classList reference

edit: About the update on the question:

document.getElementsByClassName(); will return a nodelist, instead of just one node. Notice the 's' in getElementsByClassName. You'll have to use a loop like in this answer to change properties for each node.

Try to use data- attribute and simply play with them. Like in your example, you can use data-id="item-1" and this will do the game.

Reference to data- attributes.

本文标签： htmlHow to get a child element by id by its parent id element using pure JavascriptStack Overflow