Nhận cha mẹ và con khoảng đầu jQuery

Question

Tôi có cấu trúc này:

<div class="list"> 
    <ul> 
     <li> 
      <span class="number">1</span> 
      <p class="list-title"><a href="#">Welcome</a></p> 
      <img src="images/like.png" class="like" /> 

      <div class="subcomments"> 
       <div class="comments"> 
       <ul> 
        <li> 
         <span class="number">2</span> 
         <img src="images/like.png" class="like" /> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </li> 
</ul> 

Và tôi muốn khi nhấp chuột vào các lớp "like" xuất hiện nội dung của span.number, tức là đi vào cha và lấy nội dung của khoảng với số lớp.

Tôi đang cố gắng này:

$('.like').parent().children('span:first').text() 

Nhưng luôn luôn mang lại cho tôi 1 trong hai tình huống, thay vì đưa ra 1 trong lần đầu tiên như thế nào, và 2 trong lần thứ hai như thế nào.

Answer 1

Bạn cần jquery siblings(),

Live Demo

$('.like').siblings('span:first').text(); 

Answer 2

bạn nên sử dụng this

$(.link).click(function() { 
    $(this).parent().find('.number').text(); 
    // $(this).parent().find('span:first').text(); // same thing 
    // $(this).closest('.number').text();   // same thing 
}) 

khi bạn chỉ cần viết $('.link').parent().find('span:first').text(); nó luôn luôn sẽ mất lớp đầu tiên .link và mất giá trị khoảng của nó, khi bạn sử dụng this nó sử dụng chính xác điều đó .link mà bạn đã nhấp vào

Answer 3

Sử dụng .siblings():

$('.like').siblings('span:first').text(); 

Điều này tự nó sẽ luôn hiển thị 1 - bởi vì công cụ chọn .like trả về 2 phần tử - với mã sau (.siblings('span:first').text();) chạy ngược lại yếu tố đầu tiên cả hai lần - bạn cần phải sử dụng từng phần tử để lặp lại từng giá trị:

$('.like').each(function() { 
    alert($(this).siblings('span:first').text()); 
})​ 

Example here