Как получить идентификатор ребенка, когда я нажимаю на родителя?

Question

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

Когда я нажимаю на div с тегом class="big", я хочу получить детский идентификатор или текст. Я перепробовал все несколько методов, но я не могу справиться с этим. Кто-нибудь знает, как это сделать? Javascript или Jquery не имеет значения.

Большое спасибо!

Answer 1

Для более современного способа с ES6:

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

Answer 2

Вы можете передать контекст, используя 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 3

Используйте 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 4

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

Этот код будет печатать идентификаторы big div.

Answer 5

Вы можете передать выбранный элемент на 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>