Question

<div class="big" onclick="dataadd()">
   <div id="a">child1</div>
   <div id="b">child2</div>
</div>

当我单击带有class="big"标签的div时，我想获取孩子的ID或文本。我尝试了所有几种方法，但无法处理。有人知道怎么做吗？ Javascript或Jquery无关紧要。

非常感谢您！

Answer 1

您可以通过dataadd(this)来传递您单击的元素；

您可能想知道this是如何进入方法的。如上添加this关键字将引用当前元素。

然后使用该元素，您可以找到子项，并使用each可以通过遍历这些子项来获取其他详细信息。

function dataadd(ele){
 var children = $(ele).find('div');
    children.each(function(idx, element){
      console.log($(element).attr('id'));
 
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big" onclick="dataadd(this)">
   <div id="a">child1</div>
   <div id="b">child2</div>
</div>

Answer 2

使用children()选择元素的子元素，并使用map()将元素映射到id属性。

$(".big").click(function(){
  var ids = $(this).children().map(function(){
    return this.id;
  }).toArray();
  console.log(ids);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big">
   <div id="a">child1</div>
   <div id="b">child2</div>
</div>

您还可以使用下面显示的更简单的代码

$(".big").click(function(){
  console.log(
    $('> *', this).map((i, val) => val.id).toArray()
  );
});

Answer 3

使用ES6的更现代方式：

document.querySelector(".big").addEventListener('click', function(e){
    [...e.target.children].forEach(function(child){
        const { id, innerText } = child;
        console.log(id, innerText);
    })
})

Answer 4

您可以使用this传递上下文，并使用querySelectorAll获取div，然后获取其id

function dataadd(elem) {
  elem.querySelectorAll('div').forEach(function(item) {
    console.log(item.id)
  })
}

<div class="big" onclick="dataadd(this)">
  <div id="a">child1</div>
  <div id="b">child2</div>
</div>

Answer 5

function dataadd(){
   $(this).children().each(function(){
      console.log($(this).attr('id'));
   })
}

此代码将打印big格的ID。

单击父母时如何获得孩子的身份证？

5 个答案: