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

Posted 2023-03-06

【中文标题】在 Wordpress 中使用 Jquery 和 css 区分两个相同的 HTML ID 元素

【英文标题】：Distinguishing between two same HTML ID elements using Jquery and css in Wordpress

【发布时间】：2016-05-06 19:06:21

【问题描述】：

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

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

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

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

还可以随意提出一个不同的函数，让我使用可能的索引专门指向每个相同的 ID 元素。谢谢！

【问题讨论】：

你为什么不给每个类添加一个不同的类并通过$(".classname") 引用每个类（“。”句点用于类，“#”用于 id），因为看起来您正在使用jQuery 或 document.getElementByClassName 与 javascript。你永远不会这样做 $(document.getElementById('it_trending-3')) 因为它以错误的方式将 JavaScript 与 jQuery 结合起来。

如果你打算不止一次地使用某些东西，你真的应该只使用类。您能否就为什么必须使用该 ID 两次提供一些背景信息？

类名也一样。它基本上是一个 wordpress 模板，这样的设计就是站点中充当小部件容器的部分只能在主页上放置一次，这意味着我不能在其他任何地方或不同位置放置小部件。如果你再次复制该部分，它基本上会重复创建相同的 ID、相同的类、相同的所有内容。这就是为什么我要尝试区分 ID 并从第一个部分中删除一些小部件并删除第二个重复部分中的替代小部件，从而为我创建两个单独的小部件部分。

【参考方案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");

【讨论】：

他说 ID 必须相同，即使这是不好的做法。

我实际上是在尝试了解哪些情况下您可以保持 id 相同....

您不能多次使用一个 ID。 ID 是唯一的，类是为了可重用性，并且可以根据需要多次使用。

是的，我同意你的看法，如果是这样的话，他可以保留一个类并使用 jquery 的first() 他可以选择该类中的第一个元素。

与使用 jQuery first 函数相比，执行 $("#wrapper .classname:first") 之类的操作更有效。

【参考方案2】：

您可以通过 2 种方式实现此目的。

基于元素的层次结构或基于元素的类属性/自定义数据属性。

在下面的示例中，我们有 3 个具有相同 id 的 span 元素，我们必须为每个 span 元素应用 3 种颜色。

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>

基于元素层次使用js/jquery应用css

JQuery

(function($)
  $("div:last #it_trending-3").css("color", "red");
  $("div:first #it_trending-3").css("color", "green");
)(jQuery);

基于元素的类属性/自定义数据属性。

JQuery

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

JS Fiddle Demo