특정 클래스 라인에 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를 사용하여 수행 할 작업은 HEAD 요소에

<script src=https://code.jquery.com/jquery-1.11.3.min.js></script> 태그를 추가하는 것입니다.

---

선택기 및 attr에 대해 학습하면 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