Question

我只想列出div中的所有元素。如果我有：

<div class="main_container">
    <h1>Hello</h1>
    <span>Hi</span>
    <p>World</p>
</div>

我希望将输出作为

的列表

h1
span
p

为了有一个想法，我正在为我的网站中的简单代码片段创建一个DOM树。请帮忙。干杯！

Answer 1

尝试使用元素的tagName属性

var tagNames = $('.main_container >').map(function(){
  return $(this).prop('tagName');
}).get();  //['h1','span','p'];

DEMO

根据您的新要求，您可以这样做，

$('.main_container >').each(function(){
  console.log($(this).prop('tagName'));
});

作为附注，我使用此选择器'.main_container >'来选择直接子元素，如果要选择所有后代，则只需将其替换为'.main_container *'

Answer 2

像这样使用，

$(".main_container").find("*").each(function(){
  alert($(this).prop("tagName"));
});

<强> Fiddle

Answer 3

你必须这样做：

$(".main_container").children().each(function(index,item){

alert($(item).prop("tagName"));

 })

获取子项，然后迭代它们以获取每个元素。

FIDDLE

你也可以创建它的数组：

var elements = $(".main_container").children().map(function(index,item){

    return $(item).prop("tagName");

     })

FIDDLE

Answer 4

试试这个

var urarr=[];
$('.main_container >').each(function(){
  urarr.push($(this).prop('tagName'));
});

for(var i in urarr)
$('body').append(urarr[i]+'<br>');

DEMO

Answer 5

Demo 试试这个

 var t = $(".main_container").find("*").map(function(i,val){
    return $(this).prop("tagName");
}).get();

Answer 6

仅限javascript，您可以使用Node.children或`Node.childNodes＆＃39;。

Node.children 会跳过所有空格，即。 #text不会显示，而 Node.childNodes 会计入空格。

注意：它们都返回一个数组。文本节点将显示在控制台中，但在窗口中不可见。

document.getElementsByClassName（＆＃39; main_container＆＃39;）[0]。儿童; // 0是索引

返回元素。

document.getElementsByClassName（＆＃39; main_container＆＃39;）[0]。孩子;

返回#text和元素

<强> Fiddle

如何列出特定父元素的所有子元素

6 个答案:

DEMO