用正則表達式搜索div類

聽起來很簡單，呵呵。很多我找到的答案，但都使用jQuery或ProtoType。我想要普通的JavaScript。它不應該那麼難，但JavaScript不是我的東西;沒有中央文件意味着尋找年齡並找不到我想要的東西。用正則表達式搜索div類

考慮下面的HTML代碼片段：

<div class="central_0"> .. </div> 
<div class="central_1"> .. </div> 
<div class="central_2"> .. </div>

現在我想用JavaScript做的事情與資料覈實。

function processDivElements() 
{ 
// search for relevant DIV classes 
var divArray = document.getElementsByClass.regex('/^central_.*$/'); 

// do stuff with the DIV elements found 
foreach (divArray as divElement) 
{ 
    divElement.style.background = '#f00'; 
}; 
}

誰能幫我翻譯這個適當的平原的JavaScript？我使用類，而不是ID。我更喜歡使用正則表達式。

來源

2012-12-08 user1887306

這是不是你只是做了好玩嗎？除非這是一種有趣的學習體驗，否則我強烈建議使用jQuery，因爲它與現實世界的工作有任何關係。 –

公平地說，有些人不希望/不需要爲一個函數加載整個庫。 https://developer.mozilla.org/en-US/docs/JavaScript： –

雖然是真的，不會有太多的「官方」 JS材料，就可以得到在MDN啓動很快。它有很棒的JS文檔。 – elclanrs

jQuery的解決方案是非常好的：

var $divs = $('div[class^="central_"]');

如果你只是想支持新的瀏覽器，你可以使用document.querySelectorAll()基本上做同樣的事情：

var divs = document.querySelectorAll('div[class^="central_"]');

如果你想支持代碼變得可怕：

var all_divs = document.getElementsByTagName('div'); 
var divs = []; 

for (var i = 0; i < all_divs.length; i++) { 
    var div = all_divs[i]; 

    if (div.className.match(/^central_\d+$/) { 
     divs.push(div); 
    } 
}

另外：

我使用類而不是ID。我更喜歡使用正則表達式。

你的類是獨一無二的，其功能類似於ID，這並不是真正意義上類的用途。構建你的HTML是這樣，而不是：

<div id="central_0" class="central">...</div> 
<div id="central_1" class="central">...</div> 
<div id="central_2" class="central">...</div>

現在，JavaScript是簡單的：

var $divs = $('.central');        // jQuery 
var divs = document.querySelectorAll('.central');  // Newer browsers 
var divs = document.getElementsByClassName('central'); // Older browsers

來源

2012-12-08 07:00:09 Blender

+1多種回答方式。 – Ryan

afaik如果瀏覽器支持它，jQ實際調用'document.querySelectorAll' – TwiNight

@TwiNight：是的。 'querySelectorAll'比使用JavaScript遍歷DOM更快。 – Blender

沒有辦法直接獲取由正則表達式匹配的元素，你唯一可以做的事情是讓所有元素的東西（如：TagName，Name等等），然後通過正則表達式來過濾元素。

和HTML樣品，你只能通過標籤名獲得所有元素，並使用正則表達式的正則表達式來檢查className。

來源

2012-12-08 07:01:47 xdazz

正如其他人已經提到你不能直接支持getElementsByClassName方法調用的正則表達式選擇。

但我會指出你的代碼中的其他問題，因爲你是JavaScript的新手。

使用類很好，但是通過編寫你的html來爲你自己做更多的工作。

取而代之的是central_0....central_2，如果他們基本上都是在相同的CSS規則操作，你應該寫他們喜歡這個central zero....central two那麼你central類可以有相同的規則，同時可以分配給#類的任何差異。這樣你也堅持DRY principle。

而且你真的應該考慮堅持該語言的最佳實踐。如果你沒有爲這些類的元素分配css規則，那麼你應該使用id's，再加上它讓你的生活變得更容易。

來源

2012-12-08 07:08:35 Ryan

用正則表達式搜索div類

回答

相關問題