如何使用jquery選擇跨度內容？

Question

我有下一個html。

我需要在onclick函數中獲取'Jan'和'2017'的跨度文本內容。

我不能使用contains（'Jan'）或contains（'2017'），因為這些值可以在運行時更改。

我嘗試了下一個，但沒有成功。

 div.relative { position: relative; top: 30px; right: 30px; bottom: 30px; left: 30px; border: 3px solid #73AD21; }

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> function ClockClicked(){ var smonth=$("span.spanmonth").filter(function() { return ($(this).text()) }); var syear=$("span.spanyear").filter(function() { return ($(this).text()) }); alert(smonth+'-'+ syear); }; </script> </head> <body> <div class="myclock"> <div class="controls"> <a class="pull-left"> <div class="btn btn-primary" onclick="ClockClicked()">Click me</div> </a> <h4> <span class="spanmonth" Jan></span> - <span class="spanyear" 2017></span> </h4> </div> </div> </body> </html>

的HTML：

我已經使用了這個功能：

Answer 1

根據聲明， 獲得的跨度文本內容為“ Jan”和“ 2017”，我假設HTML內容為

<span class="spanmonth" >Jan</span> - <span class="spanyear">2017</span>

您需要使用.text() 。 無需使用.filter()

var smonth=$("span.spanmonth").text();
var syear=$("span.spanyear").text();
alert(smonth+'-'+ syear);

我建議您使用@Rory McCrossan建議的不干擾事件處理程序。

Answer 2

首先請注意，您的HTML無效。 Jan和2017值應包裝在span元素中，而不是設置為其屬性-它本身是無效的。

其次，更好的做法是對現在過時的on*事件屬性使用不顯眼的事件處理程序。 在該事件處理程序中，您可以使用this關鍵字引用引發該事件的元素，並遍歷DOM以查找所需的span 。 在這種情況下， closest()和find()將適合您的需求。 嘗試這個：

 $('.myclock .btn').click(function() { var $clock = $(this).closest('.myclock'); var month = $clock.find('.spanmonth').text(); var year = $clock.find('.spanyear').text(); console.log(month, year); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="myclock"> <div class="controls"> <a class="pull-left"> <div class="btn btn-primary">Click me</div> </a> <h4> <span class="spanmonth">Jan</span> - <span class="spanyear" >2017</span> </h4> </div> </div>

Answer 3

注意：您的html無效，因為<和>標記之間有'Jan'而不是跨度內的文本。

無論如何，您都可以嘗試使用$( "span.spanmonth").filter(":contains('2017')" ); '過濾器： $( "span.spanmonth").filter(":contains('2017')" );

https://api.jquery.com/contains-selector/

如何使用jquery選擇跨度內容？

問題描述

3 個解決方案

解決方案1
2 已采納 2017-01-04 13:40:17

解決方案2
2 2017-01-04 13:42:40

解決方案3
0 2017-01-04 13:45:04

如何使用jquery選擇跨度內容？

問題描述

3 個解決方案

解決方案1 2 已采納 2017-01-04 13:40:17

解決方案2 2 2017-01-04 13:42:40

解決方案3 0 2017-01-04 13:45:04

解決方案1
2 已采納 2017-01-04 13:40:17

解決方案2
2 2017-01-04 13:42:40

解決方案3
0 2017-01-04 13:45:04