2012-06-25 48 views
1

我有以下HTML可能出現,但只有一次一個:與jQuery一起使用子字符串函數?

<a id="menuRange" class="button" href="#">1 - 100</a> 
<a id="menuRange" class="button" href="#">101 - 200</a> 
<a id="menuRange" class="button" href="#">201 - 300</a> 

,我用這個代碼來獲取範圍:

var $field = $('#menuRange'); 
var nums = $field.text().split('-').map(function (a) { 
    return parseInt(a, 10) + d * 100 
}); 

現在我想改變HTML到:

<a id="menuRange" class="button" href="#">Lines 1 - 100</a> 
<a id="menuRange" class="button" href="#">Lines 101 - 200</a> 
<a id="menuRange" class="button" href="#">Lines 201 - 300</a> 

我該如何做到這一點,所以我仍然像以前一樣獲得nums數據。換句話說,我可以如何讓它忽略「Lines」這個詞,好像它不在那裏一樣?

+1

您應該考慮對不同元素使用「唯一ID」。 –

+0

只有一行會出現在一頁中。謝謝 – Alan2

+1

@Joy有一個隱藏的陷阱,顯然只有其中一個元素是在頁面上一次 – Esailija

回答

2

如果你想在你放什麼錨的內容移動使用你的代碼進行計算爲屬性值完全的自由。然後你就可以改變你的主意,用戶看到的內容,而無需改變你的JS代碼:

<a id="menuRange" class="button" href="#" data-lines="1-100">Lines 1 - 100</a> 
<a id="menuRange" class="button" href="#" data-lines="101-200">Anything here</a> 
<a id="menuRange" class="button" href="#" data-lines="201-300">still works</a> 

var $field = $('#menuRange'); 
var nums = $field.attr("data-lines").split('-').map(function (a) { 
    return parseInt(a, 10) + d * 100 
}); 

你可以選擇的最小獨立屬性和max:

<a id="menuRange" class="button" href="#" data-min="1" data-max="100">Lines 1 - 100</a> 

然後您可以單獨檢索它們,而不是從單個字符串中分離出來:

var min = $field.attr("data-min"), // to get it as a string 
    max = $field.attr("data-max"); // use .attr() 
// OR 
var min = $field.data("min"),  // to have jQuery automatically convert 
    max = $field.data("max");  // it to a number use .data() 
5

只要把.substring().text()

var nums = $field.text().substring(6).split('-')... 

即剛切出返回文本的第6個字符。

或者,如果前綴並不總是存在:

var nums = $field.text().replace(/^Lines /, '').split('-') 
相關問題