JQuery獲取span的內容

我試圖在單擊按鈕時獲取span的內容。這是html：JQuery獲取span的內容

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

我試圖得到它，所以當按鈕被點擊時，它會得到跨度的值。這是我使用的是什麼：

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

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

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

});

但警報始終顯示：選擇...空

來源

2011-10-31 Frank

你想先得到父，然後找到跨度：

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

編輯：Ever go back and look at code you wrote 2 years ago嘆息，「爲什麼我要這麼做那？「。上面的代碼很尷尬。而不是.find("> span")，我應該使用.children("span")。

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

但是，你父母的孩子是什麼？兄弟姐妹！所以，而不是.parent().children("span")，我應該使用.siblings("span")。

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

但是，看着HTML，我們甚至不需要通過兄弟姐妹的立場，我們知道它的下一個兄弟：

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

或者只是：

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

就這一點而言，我們幾乎完全不使用jQuery。我們可以只是說：

var span_val = this.nextSibling.innerHTML;

但是，也許現在我已經擺擺得太遠的其他方式？

來源

2011-10-31 21:40:24 gilly3

謝謝，這工作。 – Frank

我喜歡這個答案。這幾乎是我的內心獨白每天都在發聲。這值得超過6個upvotes！ – WheretheresaWill

投票贊成'永遠回頭看看你2年前寫的代碼並呻吟，「我爲什麼這樣做？」' –

這不是按鈕的父。 div是button的父母，span是div的子女。嘗試

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

改爲。

Working demo

來源

2011-10-31 21:39:36 genesis

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

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

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

});

來源

2011-10-31 21:40:06 Emil

爲什麼在正確的解決方案反對票？ – Emil

跨度不是'.select-location'按鈕的父級，但div是（跨度在）。使用您的標記，嘗試這樣的事情：

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

來源

2011-10-31 21:48:51 Ben

下面是使用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); 
});

來源

2011-10-31 21:48:52

根據一個Jsfiddler演示多少跨越，你有，但如果跨度總會直接上門按鈕後，.next('span')將工作。如果你打算把按鈕放在同一父母div的其他地方，那麼你將需要導航dom來找到它。

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

此外，它可能是最好添加一個靶向類或屬性的跨度爲目標的更好櫃面你打算通過更復雜的DOM或多個跨距。

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

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

希望這有助於

來源

2011-10-31 21:51:30 Jeff

JQuery獲取span的內容

回答

相關問題