如何将ID元素添加到特定类行？

Question

我想将 ID 添加到包含具有指定名称的类的行。例如。如果网站将阻止包含名称为“name-1 name-2 name-3”的类的“div”或“li”此函数检测名为“name-1”的类并插入元素id =“menu”该行看起来像这样： 。你能帮我吗？ 我试过了：

<div class="menu-item menu-item-object-custom menu-item-has-children">
I am a DIV or LI element
</div>

<button onclick="myFunction2()">Try it</button>

<script>
function myFunction2() {
    var x = document.getElementsByClassName("menu-item-has-children")[0];
        x.document.createElement("id");
}
</script>

Answer 1

您不需要

document

您需要的是：

function myFunction2() {
    var x = document.getElementsByClassName("menu-item-has-children")[0];
        x.id="menu"
}

但是你应该研究一下 jQuery 中类似的东西：

$('.menu-item-has-children').attr('id','menu')

使用 jQuery 所需要做的就是添加此标签：

<script src=https://code.jquery.com/jquery-1.11.3.min.js></script>

到您的 HEAD 元素。

---

您可以通过了解选择器和属性来开始学习 jQuery。使用此链接：

• jQuery 选择器
• jQuery attr 函数

Answer 2

当您通过类名获取该元素时，请使用以下方式为您的元素提供 id

<script>
function myFunction2() {
    var x = document.getElementsByClassName("menu-item-has-children")[0];
    $('.'+x).attr('id','menu');
}
</script>

Answer 3

您可以使用Document.querySelectorAll():

function myFunction2() {  
  var elements = document.querySelectorAll('.menu-item-has-children');
  
  if (elements.length) {
    elements[0].id = 'menu';
  }
}

#menu {color:red;}

<div class="menu-item menu-item-object-custom menu-item-has-children">
  I am a DIV or LI element
</div>

<div class="menu-item menu-item-object-custom">
  I am another DIV or LI element
</div>

<button onclick="myFunction2()">Try it</button>

Answer 4

要向 JavaScript 中由类名标识的元素添加新 ID，可以使用 setAttribute 方法。具体方法如下：

1. 通过类名获取元素。
2. 检查元素是否存在。
3. 使用 setAttribute 设置新 ID。

这是 JavaScript 代码：

// Get the element by class name
let element = document.getElementsByClassName("name-1")[0]; // This gets the first element with the class name "name-1"

// Check if the element exists
if (element) {
    // Set the new ID
    element.setAttribute("id", "menu");
}