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

Question

我想向包含具有指定名称的 class 的行添加一个 ID。例如。如果该网站将阻止 "div" 或 "li"，其中包含 class 且名称如 "name-1 name-2 name-3" 此函数检测名为 "name-1" 的 class 并插入element 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。使用此链接：

Answer 2

当您通过 class 名称获取该元素时，使用以下方式为您的元素提供 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>

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

How add ID element to the specific class line?

javascript

element

class

add