javascript - 在 WordPress 中使用 Jquery 和 css 区分两个相同的 HTML ID 元素

Question

我知道让多个 HTML 元素具有相同的 ID 是一种不好的做法。然而，这就是我的情况，我需要专门修改其中任何一个。

我researched周围发现了关于Jquery方法“document.getElementByID”返回第一个相似元素，并允许您使用 css 更改它。我用它编写了下面的代码，但它不起作用。

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

我已使用 CSS-JS-PHP wordpress plugin 在我的 WordPress 主题中添加了此代码，从相同的地方创建了一个快捷方式，然后添加了短代码。有人可以指导我哪里出了问题吗？

也请随意建议一个不同的函数，也许可以让我使用索引专门指向每个相同的 ID 元素。谢谢!

Answer 1

为您要更改的 div 保留一个类:

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

Jquery 会像这样:

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

但是，如果您想通过排序索引选择该类的任何特定元素，那么您需要这样做:

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