JQuery nhận nội dung của khoảng

Question

Tôi đang cố gắng lấy nội dung của một khoảng thời gian khi nút được nhấp. Đây là html:

<div class="multiple-result"> 
<button class="select-location" id="168">Select</button> 
<span>Athens, Greece</span> 
</div> 

<div class="multiple-result"> 
<button class="select-location" id="102">Select</button> 
<span>Athens, Georgia, USA</span> 
</div> 

Tôi đang cố gắng tải xuống để khi nút được nhấp, nó sẽ nhận được giá trị của khoảng đó. Đây là những gì tôi đang sử dụng:

$('button.select-location').live('click', function(event){ 

    // set the span value 
    var span_val = $(this).parent("span").html(); 

    alert('selecting...' + span_val); 

}); 

Nhưng cảnh báo được luôn hiển thị: chọn ... vô

Answer 1

Bạn muốn nhận được phụ huynh đầu tiên, sau đó tìm ra gian tồn tại:

var span_val = $(this).parent().find("> span").html(); 

---

Edit:Ever go back and look at code you wrote 2 years ago và than thở, "Tại sao tôi lại làm rằng? ". Các mã trên là khó xử. Thay vì .find("> span"), tôi đã sử dụng .children("span").

var span_val = $(this).parent().children("span").html(); 

Nhưng, con của bố mẹ bạn là gì? Một người anh chị em! Vì vậy, thay vì .parent().children("span"), tôi đã sử dụng .siblings("span").

var span_val = $(this).siblings("span").html(); 

Nhưng, nhìn vào HTML, chúng tôi thậm chí không cần phải khai thác thông qua các anh chị em, chúng ta đều biết đó là anh chị em tiếp theo:

var span_val = $(this).next("span").html(); 

hoặc chỉ:

var span_val = $(this).next().html(); 

Đến thời điểm này, chúng tôi hầu như không sử dụng jQuery. Chúng tôi thể chỉ nói:

var span_val = this.nextSibling.innerHTML; 

Nhưng, có lẽ bây giờ tôi đã đong đưa con lắc quá xa theo cách khác?

Answer 2

Đó không phải là nút của cha mẹ. div là cha mẹ của button và span là con của div. Hãy thử số điện thoại

var span_val = $(this).parent().children("span").html(); 

thay thế.

Working demo

Answer 3

$('button.select-location').live('click', function(event){ 

    var span_val = $(this).next("span").html(); 

    alert('selecting...' + span_val); 

}); 

Answer 4

Khoảng không phải là phụ huynh của nút '.select-location', nhưng div là (khoảng đó nằm trong). Sử dụng đánh dấu của bạn, hãy thử một cái gì đó như thế này:

var spanVal = $(this).parent('.multiple-result').find('span').html(); 

Answer 5

Đây là một bản demo Jsfiddler sử dụng jQuery next

http://jsfiddle.net/vVK54/1/

$('button.select-location').live('click', function(event){  
    // set the span value 
    var span_val = $(this).next().html(); 
    alert('selecting...' + span_val); 
}); 

Answer 6

Tùy thuộc vào bao nhiêu kéo dài bạn có nhưng nếu nhịp sẽ luôn đến trực tiếp sau khi nhấn nút, .next('span') sẽ hoạt động.Nếu bạn có kế hoạch đặt nút ở bất kỳ nơi nào khác trong cùng một div cha mẹ thì bạn sẽ cần phải điều hướng dom để tìm nó.

$('selector').click(function() { 
    $(this).parent().find('span'); 
)}; 

Ngoài ra nó có thể là tốt nhất để thêm một lớp nhắm mục tiêu hoặc thuộc tính đến khoảng để nhắm mục tiêu tốt hơn trong trường hợp bạn không có kế hoạch về một dom phức tạp hơn hoặc nhiều nhịp.

<span class='clicktarget'>Text Here</span> 

$('button.select-location').click(function() { 
    var span_val = $(this).parent('div').find('span.clicktarget').html(); 
}); 

Hope this helps