Wie erhält man den Attributwert eines Kindelements?

Question

Ich brauche Attribut bekommen ‚actualCastId‘ des Bildelements in div Haar, Auge ...

<div class="char"> 
    <img src="images/avatar/char.png"> 
    <div id="hair" class="charH"><img src="images/avatar/h1.png" data-actualCastId="1" width="99px"></div> 
    <div id="eye" class="charE"><img src="images/avatar/e1.png" data-actualCastId="1" width="99px"></div> 
    <div id="nose" class="charN"><img src="images/avatar/n1.png" data-actualCastId="1" width="99px"></div> 
    <div id="mouth" class="charM"><img src="images/avatar/m1.png" data-actualCastId="1" width="99px"></div> 
    <div id="imputedName"></div> 
</div> 

Ich benutze dieses bin versucht, aber es schreiben Sie einfach nicht definiert.

charH = $("#hair").find('img').attr("actualCastId"); 
charN = $("#eye").find("img").attr("actualCastId"); 
charE = $("#nose").find("img").attr("actualCastId"); 
charM = $("#mouth").find("img").attr("actualCastId"); 

Answer 1

Hier gehen Sie mit einer Lösung

Lösung 1

charH = $("#hair").find('img').attr("data-actualCastId"); 
 
charN = $("#eye").find("img").attr("data-actualCastId"); 
 
charE = $("#nose").find("img").attr("data-actualCastId"); 
 
charM = $("#mouth").find("img").attr("data-actualCastId"); 
 

 
console.log("charH:", charH); 
 
console.log("charN:", charN); 
 
console.log("charE:", charE); 
 
console.log("charHM:", charM);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="char"> 
 
    <img src="images/avatar/char.png"> 
 
    <div id="hair" class="charH"><img src="images/avatar/h1.png" data-actualCastId="1" width="99px"></div> 
 
    <div id="eye" class="charE"><img src="images/avatar/e1.png" data-actualCastId="1" width="99px"></div> 
 
    <div id="nose" class="charN"><img src="images/avatar/n1.png" data-actualCastId="1" width="99px"></div> 
 
    <div id="mouth" class="charM"><img src="images/avatar/m1.png" data-actualCastId="1" width="99px"></div> 
 
    <div id="imputedName"></div> 
 
</div>

Lösung 2

charH = $("#hair").find('img').data("actualcastid"); 
 
charN = $("#eye").find("img").data("actualcastid"); 
 
charE = $("#nose").find("img").data("actualcastid"); 
 
charM = $("#mouth").find("img").data("actualcastid"); 
 

 
console.log("charH:" , charH); 
 
console.log("charN:" , charN); 
 
console.log("charE:" , charE); 
 
console.log("charM:" , charM);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="char"> 
 
    <img src="images/avatar/char.png"> 
 
    <div id="hair" class="charH"><img src="images/avatar/h1.png" data-actualcastid="1" width="99px"></div> 
 
    <div id="eye" class="charE"><img src="images/avatar/e1.png" data-actualcastid="1" width="99px"></div> 
 
    <div id="nose" class="charN"><img src="images/avatar/n1.png" data-actualcastid="1" width="99px"></div> 
 
    <div id="mouth" class="charM"><img src="images/avatar/m1.png" data-actualcastid="1" width="99px"></div> 
 
    <div id="imputedName"></div> 
 
</div>

Hope this Ihnen helfen.

Answer 2

Sie benötigen data-actualCastId

charH = $("#hair img").attr("data-actualCastId"); 
charN = $("#hair img").attr("data-actualCastId"); 
charE = $("#hair img").attr("data-actualCastId"); 
charM = $("#hair img").attr("data-actualCastId"); 

zugreifen Oder Sie können data() verwenden, aber für dieses attr nach Daten müssen in Kleinbuchstaben eingegeben werden. d.h actualcastid

<div class="char"> 
    <img src="images/avatar/char.png"> 
    <div id="hair" class="charH"><img src="images/avatar/h1.png" data-actualcastid="1" width="99px"></div> 
    <div id="eye" class="charE"><img src="images/avatar/e1.png" data-actualcastid="1" width="99px"></div> 
    <div id="nose" class="charN"><img src="images/avatar/n1.png" data-actualcastid="1" width="99px"></div> 
    <div id="mouth" class="charM"><img src="images/avatar/m1.png" data-actualcastid="1" width="99px"></div> 
    <div id="imputedName"></div> 
</div> 

charH = $("#hair img").data("actualcastid"); 
charN = $("#hair img").data("actualcastid"); 
charE = $("#hair img").data("actualcastid"); 
charM = $("#hair img").data("actualcastid"); 

Answer 3

Um den Inhalt des Attributs Daten id Sie verwenden müssen

1. EG1 zu erhalten: $ (this) .attr ("data-ID"); zB2: $ (this) .data ("id");

Answer 4

müssen Sie attr

charH = $("#hair").find('img').attr("data-actualCastId"); 
charN = $("#eye").find("img").attr("data-actualCastId"); 
charE = $("#nose").find("img").attr("data-actualCastId"); 
charM = $("#mouth").find("img").attr("data-actualCastId"); 

Answer 5

charH = $("#hair img').data("actualCastId"); 
charN = $("#eye img").data("actualCastId"); 
charE = $("#nose img").data("actualCastId"); 
charM = $("#mouth img").data("actualCastId");