Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript HTML jQuery
I know this question is probably pretty common, judging by the number of results that have turned up in my Google searches, but I can never seem to apply their solutions to my own issue. I have the following HTML code:
<div id="match">
    <div id="pcnt" name="1">
    </div>
</div>
 
<div id="match">
    <div id="pcnt" name="2">
    </div>
</div>
 
When the page loads, I execute the following jQuery segment to change all of the "pcnt" divs from solid black to transparent, instead of dealing with all of the opacity functions in CSS (-moz-opacity, -ms-filter, etc...)
 
$("#pcnt").each(
 
function()
{
    $(this).css('opacity', '0');
}
 
);
 
});
 
Yet, whenever I open my page, only the first "pcnt" element is transparent. The other ones are still solid black. This is driving me insane! What am I doing wrong??
 
Thanks in advanced.
Posted 18-Apr-13 11:03am
v3
Comments
Prasad Khandekar at 18-Apr-13 16:07pm
   
As per HTML spec no two elements should have same id. id's have to be unique.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Hello,
 
Change your html as shown below
<div id="match1">
    <div class="pcnt" name="1">
    </div>
</div>
 
<div id="match2">
    <div class="pcnt" name="2">
    </div>
</div>
And change your JavaScript function as shown below
$(".pcnt").each(function() {
    $(this).css('opacity', '0');
});
Regards,
  Permalink  
v2
Comments
Sergey Alexandrovich Kryukov at 18-Apr-13 16:23pm
   
That will work (as I just suggested in my answer, too), but it's good to know that those classes should better be real classes used to identify as CCS styles as well.
Please see also Solution 1 and 2.
(Voted 5.)
—SA
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

You can't have two items with the same id in html. If you want to match both div items, then you would need something like this.
$('[id*="pcnt"]').each(function(){
   // Do your stuff...
});
<div id="match1">
    <div id="pcnt1" name="1">
    </div>
</div>
 
<div id="match2">
    <div id="pcnt2" name="2">
    </div>
</div>
  Permalink  
Comments
Sergey Alexandrovich Kryukov at 18-Apr-13 16:21pm
   
Exactly. My 5. I just explained the same thing in my answer.
—SA
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

I can say what I can see from your code. The problem is not the method .each which of course should traverse the full set of elements, but the set of element itself, more exactly, the selector you use.
 
Your selector is the "id selector", based on the attribute id. The purpose of this attribute is the unique identification of some element. So, the selector should not make a set of more then one element, by definition. Now, your HTML actually contains more then one case of id="pcnt". In other words, this is not a valid HTML. I don't know how JavaScript is supposed to act on invalid HTML and I don't know if it is ever prescribed by the ECMAScript standard. You should rather be on the safe side and assume that JavaScript can give you unpredictable results. In other way, you should always provide valid HTML.
 
I hope you got the point. Now, what to do in your case? How to traverse all the div elements you want? It's really up to you, but you certainly need to use some other selector. For example, they can have some common CSS class applied only to these DIVs; or you can have only these DIVs on the whole page. Look at the available selectors to see the possibilities you can use:
http://api.jquery.com/category/selectors/[^].
 
See also:
http://api.jquery.com/jQuery.each/[^],
http://api.jquery.com/id-selector/[^],
http://en.wikipedia.org/wiki/ECMAScript[^].
 
—SA
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 4

It happens because the elements have the same ID, when you select an element using $("#id") jQuery uses document.getElementById to retrive it back, but this function returns just one element(the first with the given id).
so, if you want to apply something to multiple elements i think you should use css classes selector $(".class"). And you should not give the same ID to multiple elements.
 
something like
 
<div>
    <div class="element">
    </div>
</div>
 
<div>
    <div class="element">
    </div>
</div>
 
and your script
 
$(".element").css('opacity', '0'); 
  Permalink  
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 350
1 Jochen Arndt 190
2 Richard MacCutchan 135
3 Sergey Alexandrovich Kryukov 130
4 DamithSL 105
0 OriginalGriff 6,045
1 DamithSL 4,601
2 Maciej Los 4,087
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,310


Advertise | Privacy | Mobile
Web04 | 2.8.141220.1 | Last Updated 18 Apr 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100