ID結束於純Javascript使用

Question

我正在一個Javascript庫中，帶來了jQuery的一件事：一個「結束」選擇器。它看起來像這樣：

$('[id$=foo]') 

它會找到其中id與「富」結尾的元素。

我正在尋找這樣做沒有jQuery（直JavaScript）。你會怎麼做呢？我也希望它儘可能高效。

Answer 1

使用querySelectorAll,not available in all browsers (like IE 5/6/7/8) though。它基本上作品如jQuery：

http://jsfiddle.net/BBaFa/2/

console.log(document.querySelectorAll("[id$=foo]")); 

Answer 2

您需要迭代頁面上的所有元素，然後使用字符串函數對其進行測試。我能想到的唯一優化是改變起點 - 即不是document.body，而是其他一些元素，如果您知道元素的標籤名稱，則可以使用document.getElementsByTagName()來獲取元素列表。

但是，如果您可以使用某些第三方javascript，例如您的任務將更容易多。 Sizzle（4k縮小，與jQuery使用的選擇器引擎相同）。

Answer 3

如果您知道您定位的DOM元素的類型，則 然後使用getElementsByTagName獲取對它們的引用列表，然後遍歷它們。

您可以使用此優化以固定的迭代：

• 忽略沒有ID的元素。

• 目標要尋求元素的最近的已知父，讓我們說你的元素是與ID =「myContainer中」一個div裏面，那麼你可以使用 document.getElementById('myContainer').getElementsByTagName('*')受限制的子集，然後在它們之間迭代。

Answer 4

因此，利用一切手段，這是說，我放在一起的代碼。假設我的元素都是input s，那麼下面的代碼可能是我將要得到的最好的代碼？

String.prototype.endsWith = function(suffix) { 
    return this.indexOf(suffix, this.length - suffix.length) !== -1; 
}; 

function getInputsThatEndWith(text) { 

    var result = new Array(); 
    var inputs = document.getElementsByTagName("input"); 

    for(var i=0; i < inputs.length; i++) { 
     if(inputs[i].id.endsWith(text)) 
      result.push(inputs[i]); 
    } 

    return result; 
} 

我把它的jsfiddle：http://jsfiddle.net/MF29n/1/

Answer 5

@ThiefMaster談到了如何做檢查，但這裏的實際代碼：

function idEndsWith(str) 
{ 
    if (document.querySelectorAll) 
    { 
    return document.querySelectorAll('[id$="'+str+'"]'); 
    } 
    else 
    { 
    var all, 
     elements = [], 
     i, 
     len, 
     regex; 

    all = document.getElementsByTagName('*'); 
    len = all.length; 
    regex = new RegExp(str+'$'); 
    for (i = 0; i < len; i++) 
    { 
     if (regex.test(all[i].id)) 
     { 
     elements.push(all[i]); 
     } 
    } 
    return elements; 
    } 
} 

這可以在許多增強方法。目前，它遍歷的整個 DOM，但會更有效，如果它有一個背景：

function idEndsWith(str, context) 
{ 
    if (!context) 
    { 
    context = document; 
    } 
    ...CODE... //replace all occurrences of "document" with "context" 
} 

有沒有驗證/逃脫在此功能的str變量，假定是，它僅會接收一串字符。

Answer 6

建議修改your answer：

RegExp.quote = function(str) { 
    return str.replace(/([.?*+^$[\]\\(){}-])/g, "\\$1"); 
}; // from https://stackoverflow.com/questions/494035/#494122 

String.prototype.endsWith = function(suffix) { 
    return !!this.match(new RegExp(RegExp.quote(suffix) + '$')); 
}; 

function getInputsThatEndWith(text) { 

    var results = [], 
     inputs = document.getElementsByTagName("input"), 
     numInputs = inputs.length, 
     input; 

    for(var i=0; i < numInputs; i++) { 
     var input = inputs[i]; 
     if(input.id.endsWith(text)) results.push(input); 
    } 

    return results; 
} 

http://jsfiddle.net/mattball/yJjDV/

實現String.endsWith使用正則表達式，而不是indexOf()主要是偏好的問題，但我想這是值得包括品種。如果您不擔心在後綴中轉義特殊字符，您可以刪除RegExp.quote()位，並只使用
new RegExp(suffix + '$')。