Wie erhält man den Tagnamen eines Kindelements eines Divs oder eines anderen?

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</head> 
<body> 
<div id="pagehead"> 
    <h1>Sample 1</h1> 
    <h1>Sample 2</h1> 
    <p>Thank you</p> 
</div> 
<button onclick="savetoJSON()">Save</button> 
</body> 
<script> 
    var count=$("#pagehead").children().length; 
    for(i=0;i<count;i++) 
    { 
     var ele=$("#pagehead").children()[i]; 
    } 
</script> 
</html>

Ich möchte den Tagname aller Kinder eins nach dem anderen in einem String-Format erhalten. Ich habe versucht .prop("tagName");, die Dint funktioniert. Außerdem würde ich gerne wissen, wie man [object HTMLHeadingElement] -Objekt in einen String konvertiert.Wie erhält man den Tagnamen eines Kindelements eines Divs oder eines anderen?

Quelle

2017-05-16 Bharadwaj

Verwenden Sie Element.tagName Eigenschaft, es gibt den Namen des Elements zurück.

var count = $("#pagehead").children().length; 
 
for (i = 0; i < count; i++) { 
 
    var ele = $("#pagehead").children()[i]; 
 
    console.log(ele.tagName); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="pagehead"> 
 
    <h1>Sample 1</h1> 
 
    <h1>Sample 2</h1> 
 
    <p>Thank you</p> 
 
</div>

Optimierte Option:

var pageheadChildren = $("#pagehead").children(); 
 
for (var i = 0, len = pageheadChildren.length; i < len; i++) { 
 
    console.log(pageheadChildren[i].tagName); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="pagehead"> 
 
    <h1>Sample 1</h1> 
 
    <h1>Sample 2</h1> 
 
    <p>Thank you</p> 
 
</div>

Mit jQuery.prop:

$("#pagehead").children().each(function() { 
 
    console.log($(this).prop('tagName')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="pagehead"> 
 
    <h1>Sample 1</h1> 
 
    <h1>Sample 2</h1> 
 
    <p>Thank you</p> 
 
</div>

Quelle

2017-05-16 10:45:03 Rayon

Diese sehr ineffizient ist. Jedes Mal, wenn '$ (" # pageshead ")' ausgeführt wird, wird eine Suche im DOM durchgeführt. Warum speicherst du es nicht einfach in einer Variablen? – Aloso

@Aloso - OP hat nie nach der Effizienz seines Codes gefragt, dieses Snippet bietet einfach den Ansatz, 'tagName' des Elements zu erhalten ... – Rayon

Jeder Code sollte zu einem gewissen Grad effizient sein. Es ist ein allgemeines Kriterium für die Codequalität. Es muss nicht explizit angefordert werden. – Aloso

element.tagName ist der Weg zu gehen. aber beachten Sie, dass die dom jedes Mal durchqueren Sie das Kind zugreifen wollen, ist kontraproduktiv:

var children = $("#pagehead").children() 
 
children.each(function(index,el){ 
 
    console.log(el.tagName); 
 
})

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<div id="pagehead"> 
 
    <h1>Sample 1</h1> 
 
    <h1>Sample 2</h1> 
 
    <p>Thank you</p> 
 
</div> 
 
<button onclick="savetoJSON()">Save</button> 
 
</body> 
 

 
</html>

Quelle

2017-05-16 10:47:08 n00dl3

Sie .each() eine Schleife durch die Elemente verwenden können und Ihren Code ein wenig vereinfachen.

$("#pagehead").children().each(function() { 
 
\t console.log($(this).prop('tagName')); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="pagehead"> 
 
    <h1>Sample 1</h1> 
 
    <h1>Sample 2</h1> 
 
    <p>Thank you</p> 
 
</div>

Quelle

2017-05-16 10:47:10 Turnip

Vielleicht haben Sie versucht $(el)[i].prop('tagName'), die scheitern. Versuchen Sie, nur Looping Ihre Elemente und Liste $(el).prop('tagName')

function savetoJSON() { 
 
    $("#pagehead > *").each(function() { 
 
    console.log($(this).prop('tagName')); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div id="pagehead"> 
 
    <h1>Sample 1</h1> 
 
    <h1>Sample 2</h1> 
 
    <p>Thank you</p> 
 
</div> 
 
<button onclick="savetoJSON()">Save</button>

Quelle

2017-05-16 10:47:37 Justinas

Verwenden map() Ihrer Liste als Array erzeugen

var tags = $('#pagehead').children().map(function(){ 
 
    return this.tagName; 
 
}).get().join() 
 

 
console.log(tags);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="pagehead"> 
 
    <h1>Sample 1</h1> 
 
    <h1>Sample 2</h1> 
 
    <p>Thank you</p> 
 
</div>

Quelle

2017-05-16 11:08:21 charlietfl

Wie erhält man den Tagnamen eines Kindelements eines Divs oder eines anderen?

Antwort

Verwandte Themen