ID要素を特定のクラス行に追加するにはどうすればよいですか？

Question

指定した名前のクラスを含む行にIDを追加したいとします。例えば。 "name-1 name-2 name-3"のような名前のクラスを含む "div"または "li"をブロックする場合、この関数は "name-1"という名前のクラスを検出し、要素id = "menu"その行は次のようになります。手伝ってくれますか？ 私がすることを試みた：あなたは何が必要documentにこれを必要としない

<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

：

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

しかし、あなたはそのようなことのためのjQueryになります。

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

jQueryを使用するために行うべきことは、このタグをHEAD要素に追加することです：

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

---

セレクタについて学ぶことで、jQueryを学ぶことができます。このリンクを使用すると：

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

Answer 2

あなたはyur要素にIDを与える方法を、次のクラス名、使用することによって、その要素を取得すると：

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 3

あなたはDocument.querySelectorAll()を使用することができます

• jQuery Selectors
• jQuery attr function