2

I know that is a bad practice to have more than HTML elements having same ID. However such is my situation where I need to specifically modify either of them.

I researched around and found about Jquery method 'document.getElementByID' that returns with the first similar element and lets you change it using css. Using that I wrote the code below but it doesn't work.

$(document.getElementById('it_trending-3')).css({"display":"none"});

I have added this code in my wordpress theme using the CSS-JS-PHP wordpress plugin, created a shortcut from the same and then added the shortcode. Can someone please guide me what and where I went wrong?

Also feel free to suggest a different function that would maybe let me specifically point to each of the same ID elements using maybe indexes. Thanks!

Community
  • 1
  • 1
Kaushal Kapoor
  • 442
  • 1
  • 5
  • 14
  • 2
    Why don't you just add a different class to each and refer to each by `$(".classname")` ( "." period is for classes "#" is for id's ) since it looks like you are using jQuery or `document.getElementByClassName` with javascript. You would never do `$(document.getElementById('it_trending-3'))` as it is combining JavaScript with jQuery in the wrong way. – Leggy Jan 29 '16 at 06:02
  • You should really just use classes if you plan on using something more than once. Could you give some context as to why you HAVE to use the ID twice? – Leggy Jan 29 '16 at 06:31
  • The classnames are same as well. It is basically a wordpress template and such is the design that a section in the site acting as a container for the widgets can only be placed once on the homepage meaning that i cannot have widgets anywhere else or at different places. And if you do copy the section again, it basically duplicates creating same id, same classes, same everything. Which is why Iam trying to differ the IDs and remove some widgets from the 1st section and remove the alternative ones in the second duplicate section thereby creating two seperate widget sections for me. – Kaushal Kapoor Jan 29 '16 at 10:52

2 Answers2

2

Keep a class to the divs you want to change:

<div>
    <span id="a" class="test">1</span>
    <span id="b" class="test">2</span>
    <span>3</span>
</div>

The Jquery would go like this:

$(function() {
    var w = $("div");
    console.log($('#a').length);
    console.log($('body #a').length);
    console.log($('#a', w).length);
});

$(".test").first().css({"color":"orange"});
//or
$(".test:first").css({"color":"orange"});

But if you want to select any specific element with the class via an index of sorts, then you would need to do it like this:

var x = $(".test");
$(x[1]).css({"color":"orange"});
dvenkatsagar
  • 936
  • 7
  • 22
  • He said the ID's have to be the same even though it's bad practice. – Leggy Jan 29 '16 at 06:18
  • Im actually trying to understand what situations that you can keep id's the same.... – dvenkatsagar Jan 29 '16 at 06:19
  • 2
    You can never use an ID more than once. ID's are to be unique, classes are for reusability and can be used as many times as required. – Leggy Jan 29 '16 at 06:21
  • Yes I agree with you, Now if that is the case, he can keep a class and using jquery's `first()` he can select the first element in that class. – dvenkatsagar Jan 29 '16 at 06:23
  • 2
    It's more efficient to do something like `$("#wrapper .classname:first")` as opposed to using the jQuery `first` function. – Leggy Jan 29 '16 at 06:26
  • Thanks for the answer Venkat! However it is only working for the first element. Is there a way I can point to seperate IDs specifically using index numbers or something? Here's what I have till now: `(function($) { $(".widget.clearfix.Trending:last").css("display", "none"); })(jQuery);` – Kaushal Kapoor Jan 29 '16 at 10:58
  • I tried using the `:nth-child()` selector as well and this the logic code. `$(".widget.clearfix.Trending:nth-child(2)").css("display", "none");` but still only the first elements goes display:none not the second as it should – Kaushal Kapoor Jan 29 '16 at 12:46
  • No instead of `nth-child`, You would need to do something like this: `var x = $(".widget.clearfix.Trending"); $(x[2]).css("display":"none");` – dvenkatsagar Jan 29 '16 at 14:58
  • unfortunately it is not working for me and none of the elements go display:none. Here is the complete code iam executing: `(function($) { var x = $(".widget.clearfix.Trending"); $(x[2]).css("display":"none"); }) (jQuery);` – Kaushal Kapoor Jan 29 '16 at 21:03
  • Its `$(x[2]).css({"display":"none"});` not `$(x[2]).css("display":"none");` – dvenkatsagar Jan 29 '16 at 21:08
  • Iam afraid it is still not working. Resulta are back to square one with no elements going display:none. Any other suggestions? – Kaushal Kapoor Jan 31 '16 at 18:29
  • Logically speaking, the solution should work, if its not, there must be a problem somewhere else.... – dvenkatsagar Jan 31 '16 at 18:31
1

You can achieve this in 2 ways.

Based on element's hierarchy or based on class attribute / custom data attribute to the element.

In the below example we have 3 span elements with the same id and we have to apply 3 colors to each of those span elements.

HTML

<div>
  <span id="it_trending-3">
    Applying css to same Id with hierarchy  (span in 1st div)
  </span>
</div>
<div>
<span id="it_trending-3">
Applying css to same Id with hierarchy (span in 2nd div)
</span>
</div>

<br /><br /><br />
<span id="it_trending-3" class="testcls">
  Applying css to same Id with class
</span>
  1. Applying css using js / jquery based on element hierarchy

JQuery

(function($){
  $("div:last #it_trending-3").css("color", "red");
  $("div:first #it_trending-3").css("color", "green");
})(jQuery);
  1. Based on class attribute / custom data attribute to the element.

JQuery

(function($){
  $("#it_trending-3.testcls").css("color", "blue");
})(jQuery);

JS Fiddle Demo

Divakar Gujjala
  • 803
  • 8
  • 24