jQuery kann das übergeordnete Element nicht abfangen

Question

Ich versuche, auf das übergeordnete Element bis zum Schaltflächenelement zuzugreifen, um seine CSS zu ändern. Ich kann auf das Element span über ID zugreifen. Aber wenn ich an die Eltern zu gehen versuchen img sagt es undefined

Hier ist mein HTML-Code

<button type="button" class="buttonLike">\ 
    <img src = "../Image/thumbsUp.png" clas="test">\ 
      <span class="postID" id=' + idPost + '>' + likesPost + '</span>\ 
    </img>\ 
</button>\ 

und hier ist meine jQuery-Code, der das span-Element zugreifen

$.each(result, function (index,data) { 
       var liked = data.liked; 
       if (liked == true) { 
        console.log($("#" + postId).parent("img").attr("src")); 
       } 
    }); 

Wie kann ich Mach das richtig.

Answer 1

Img-Element ist selbstschließend. versuchen Sie dies:

<button type="button" class="buttonLike">\ 
    <img src = "../Image/thumbsUp.png" clas="test"> 
    <span class="postID" id=' + idPost + '>' + likesPost + '</span>\ 
</button> 

und es mit jquery erhalten:

console.log($("#" + postId).parent().find("img").attr("src")); 

Answer 2

Ich glaube, Sie nicht die Spanne innerhalb des img wickeln sollte. das wird dir leichter fallen. Aber wenn du es immer noch willst. Versuche dies. $ ("# postId"). Am nächsten ("img");

Answer 3

Versuchen Sie es mit dieser

.parent().find('img').attr('src') 

console.log($("#idPost").parent().find('img').attr('src'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="buttonLike"> 
 
    <img src = "Image/thumbsUp.png" class="test"> 
 
    <span class="postID" id='idPost'>likesPost </span> 
 
    
 
</button>

Answer 4

Ich habe das Bild geschlossen und machte die Spanne als Geschwister der Eltern;

In diesem Codeausschnitt habe ich sowohl jquery Ansatz und pure js Ansatz zur Verfügung gestellt. Hoffe das hilft.

//jquery approach 
 
console.log($(".postID").siblings('.test').attr("src")); 
 

 
//pure js 
 
console.log(document.getElementsByClassName("postID")[0].previousElementSibling.getAttribute('src'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="buttonLike"> 
 
<img class="test" src="http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg"/> 
 
    <span class="postID" id=' + idPost + '>' + likesPost + '</span>  
 
</button>