Distinguer deux éléments HTML identiques à l’aide de Jquery et de css dans WordPress

Je sais que c’est une mauvaise pratique d’avoir plus que des éléments HTML ayant le même identifiant. Cependant, telle est la situation dans laquelle je dois modifier spécifiquement l’un ou l’autre.

J’ai fait des recherches et découvert la méthode Jquery ‘document.getElementByID’ qui renvoie le premier élément similaire et vous permet de le modifier à l’aide de css . En utilisant cela, j’ai écrit le code ci-dessous mais cela ne fonctionne pas.

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

J’ai ajouté ce code dans mon thème wordpress à l’aide du plugin wordpress CSS-JS-PHP , créé un raccourci à partir de celui-ci, puis ajouté le shortcode. Quelqu’un peut-il me guider s’il vous plaît quoi et où je suis allé mal?

Aussi, n’hésitez pas à suggérer une fonction différente qui me permettrait peut-être d’indiquer spécifiquement chacun des mêmes éléments d’identification à l’aide peut-être d’index. Merci!

Gardez une classe aux divs que vous voulez changer:

 
1 2 3

Le Jquery irait comme ceci:

 $(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"}); 

Mais si vous voulez sélectionner un élément spécifique avec la classe via un index, vous devez le faire comme ceci:

 var x = $(".test"); $(x[1]).css({"color":"orange"}); 

Vous pouvez y parvenir de deux manières.

Basé sur la hiérarchie de l’élément ou sur l’atsortingbut de classe / l’atsortingbut de données personnalisé de l’élément.

Dans l’exemple ci-dessous, nous avons 3 éléments d’envergure avec le même identifiant et nous devons appliquer 3 couleurs à chacun de ces éléments.

HTML

 
Applying css to same Id with hierarchy (span in 1st div)
Applying css to same Id with hierarchy (span in 2nd div)



Applying css to same Id with class
  1. Application de css à l’aide de js / jquery en fonction de la hiérarchie des éléments

JQuery

 (function($){ $("div:last #it_trending-3").css("color", "red"); $("div:first #it_trending-3").css("color", "green"); })(jQuery); 
  1. Basé sur l’atsortingbut de classe / l’atsortingbut de données personnalisé de l’élément.

JQuery

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

JS Fiddle Demo