javascript - 如何从另一个 div 中获取 DIV 值

Question

如何class="selected"在 div 中获取 a 的值，我尝试了以下代码，但我得到了undefined

<div class="myTest1" title="testTitle1" id="test1" >       
        <div>answer 1</div>
        <div>answer 2</div>
        <div>answer 3</div>
        <div class="selected">answer 4</div>     
</div>
<div class="myTest2" title="testTitle2" id="test2">
    <div  >
        <div>answer 1</div>
        <div>answer 2</div>
        <div class="selected">answer 3</div>
        <div>answer</div>
    </div>
</div>
 <div class="myTest3" title="testTitle2" id="test3">
    <div  >
        <div>answer 1</div>
        <div class="selected">answer 2</div>
        <div >answer 3</div>
        <div>answer 4</div>
    </div>
</div>

JS代码：

我意识到我的代码没有优化，我正在使用三个for循环。

    var test1= document.getElementById("test1");
    var test2= document.getElementById("test2");
    var test3= document.getElementById("test3");       
   
    for (var i=0; i<test1.length; i++) {
        var sel1 = document.getElementsByClassName("selected");
        alert(quizAns1[i].innerHTML);
    }
   
    for (var i=0; i<test2.length; i++) {
        var sel2 = document.getElementsByClassName("selected");
        alert(sel2[i].innerHTML);
    }
   
    for (var i=0; i<test3.length; i++) {
        var sel3 = document.getElementsByClassName("selected");
        alert(sel3[i].innerHTML);
    }

标签： javascript

Answer 1

只需根据类直接查询元素，然后遍历结果。此外，将每个问题归为同一类，以便更轻松地对它们进行分组。

document.querySelectorAll("div.selected").forEach(function(item, index){
  // Use .closest to get the nearest matching ancestor:
  alert("For question " + item.closest(".myTest").id + ", you answered: " + item.textContent); 
});

<div class="myTest" title="testTitle1" id="test1" >       
        <div>answer 1</div>
        <div>answer 2</div>
        <div>answer 3</div>
        <div class="selected">answer 4</div>     
</div>
<div class="myTest" title="testTitle2" id="test2">
    <div  >
        <div>answer 1</div>
        <div>answer 2</div>
        <div class="selected">answer 3</div>
        <div>answer</div>
    </div>
</div>
 <div class="myTest" title="testTitle2" id="test3">
    <div  >
        <div>answer 1</div>
        <div class="selected">answer 2</div>
        <div >answer 3</div>
        <div>answer 4</div>
    </div>
</div>