如何导航到其他div并访问其内容

Question

我想从#toDoListContainer div导航到#taskDiv，我该如何在jquery中执行此操作。

我想从div导航到div，以便能够访问每个div的数据以使图片显示

我做了命令

console.log($("#toDoListContainer")[0]);

所以我试图像这样导航div ..

  

console.log($("#toDoListContainer")[0].children);

我应该能够通过以下方式进入第0区：

  

console.log($("#toDoListContainer")[0].children[0]);

但我得到了未定义。任何想法？

Answer 1

嘿，因为这样你的ids改为上课 Id应该是唯一的。

$('#toDoListContainer').find('div.taskDiv').each(function() {

  var self = $(this);
  // now what ever you want to do
  //like 
  console.log(self.attr('data-completed'));
  console.log(self.text())

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="toDoListContainer">
  <div class="taskDiv" data-completed="y">text1</div>
  <div class="taskDiv" data-completed="y">text2</div>
  <div class="taskDiv" data-completed="y">text3</div>
</div>

Answer 2

对所有div使用相同的ID是不好的做法，您不会尊重HTMl Specification，其中ID对于整个页面中的元素必须是唯一的

所以将你的id改为class，可以直接访问

见下面的代码：

＆＃13;

＆＃13;

$(function(){
  $("#toDoListContainer .taskDiv").each(function(index,element){
    
    console.log("task n°"+index+ " data-completed = "+$(element).data("completed"));
    console.log("it's HTML Content = "+$(element).html());
    console.log("--------------------------------------");
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toDoListContainer">
  <div class="taskDiv" data-completed="Y"><p>paragraph</p></div>
  <div class="taskDiv" data-completed="Y"><span>span</span></div>
  <div class="taskDiv" data-completed="N"><h3>heading text</h3></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

不建议对多个元素使用相同的ID，但是如果您想保留HTML代码，则仍然可以使用以下代码片段。

var taskDivs = $("div #taskDiv");
taskDivs.each(function(x) {
  console.log(taskDivs[x])
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toDoListContainer">
  <div id="taskDiv"> Task 1 </div>
  <div id="taskDiv"> Task 2 </div>
  <div id="taskDiv"> Task 3 </div>
</div>