Не удается получить доступ потомок HTML элемента с помощью JQuery

Question

У меня есть проблема с получением html() ценности ребенка родителя: D

function voteup(e){ 
 
    var count = $(e).parents('.item').children('.count'); 
 
    console.log(count.html()); // undefined 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="post_contain"> 
 
    <img src="images/comments/dQ6dz.jpg" alt=""> 
 
</div> 
 
<div class="item"> 
 
    <p class="post-meta"> 
 
    <span href="/gag/agVzE1g" target="_blank"> 
 
     <span class="count">5</span>points 
 
    </span> 
 
    </p> 
 
    <div class="vote"> 
 
    <ul class="btn-vote left"> 
 
     <li class="badge-item-vote-up-li"> 
 
     <a onclick="voteup(this)">Click me</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

В функции voteup(e), мне нужно получить значение класса 'count', но я не получаю значение с html()

Answer 1

children только проходит один уровень DOM tre е. он не найдет внуков.

Вместо этого используйте closest найти .item - который находит единственный ближайший матч, в отличие от parents, которые могут найти несколько - и find, чтобы найти ребенка, так как это будет проходить сколь угодно глубокие HTML структуры:

function voteup(e){ 
    var count = $(e).closest('.item').find('.count'); 
    alert(count.html()); 
    var actual = parseInt(count.html(), 10); 
    count.text(actual + 1); 
}