Question

我正在尝试访问按钮元素的父元素以修改其css。我可以通过id访问span元素。但是，当我尝试转到父img时，它表示未定义

这是我的HTML代码

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

这是我的访问span元素的jquery代码

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

我该怎么做呢。

Answer 1

img元素是自我关闭的。试试这个：

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

并使用jquery获取它：

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

Answer 2

我认为你不应该在img中包装span。这将使你更容易。但如果你还想。试试这个。 $（ “＃帖子ID”）最接近的（ “IMG”）;

Answer 3

尝试使用此

.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

我关闭了图片，并将跨度作为父母的兄弟;

在这段代码中，我提供了jquery方法和纯js方法。希望这会有所帮助。

//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>

jQuery无法捕获父元素

4 个答案: