Question

如何在div中获取class="selected"的值，我尝试了以下代码，但获得了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);
    }

Answer 1

只需直接基于类查询元素，然后循环遍历结果。另外，为每个问题分配相同的课程，以便可以更轻松地将它们分组。

@HostListener('document:click', ['$event'])
public handleClick(event: Event): void {
 if (event.target instanceof HTMLAnchorElement) {
   const element = event.target as HTMLAnchorElement;
   if (element.className === 'routerlink') {
     event.preventDefault();
     const route = element?.getAttribute('href');
     if (route) {
       this.router.navigate([`/${route}`]);
     }
   }
 }

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); 
});

Answer 2

您的错是试图获取元素的长度。

bar

我是新来的。我不能只留下评论，所以

Answer 3

只需在所有DIV上添加相同的“类”，并进行代码更改即可。并检查我希望的代码段。

var elementList = document.querySelectorAll(".selected");
    for (i = 0, max = elementList.length; i < max; i++) {
      let question = elementList[i].closest(".myTest").getAttribute ("id");
        console.log(`Question: ${question} -> Answer: ${elementList[i].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>

Answer 4

如果您确实想每次准确定位目标div，我想您会在实际情况下这样做：

var test1 = document.getElementById("test1");
var test2 = document.getElementById("test2");
var test3 = document.getElementById("test3"); 

var sel1 = test1.querySelector('.selected');
var sel2 = test2.querySelector('.selected');
var sel3 = test3.querySelector('.selected');

Answer 5

您应该这样做

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

在您的js中，

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.querySelector("#test1 .selected");
    alert(sel1.innerHTML);
}

for (var i=0; i<test2.length; i++) {
    var sel2 = document.querySelector("#test2 .selected");
    alert(sel2.innerHTML);
}

for (var i=0; i<test3.length; i++) {
    var sel3 = document.querySelector("#test3 .selected");
    alert(sel3.innerHTML);
}

Answer 6

您可以尝试以下方法：

for(let q = 1; q <= 3; ++q)
  console.log("question", q, document.querySelector("#test" + q).querySelector(".selected").textContent);

<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>

希望这会有所帮助。

如何从另一个div内获取DIV值

6 个答案: