如何使用部分類名查找div並獲取該類名的剩餘部分？

有我的網頁上幾個的div類my_widget-2，my_widget-8等什麼的JavaScript或jQuery代碼我可以用得到的數字「2」（即在該追加第一匹配部件號）？如何使用部分類名查找div並獲取該類名的剩餘部分？

注意：如果我再次寫這個問題，我會改變這些類名的順序，並要求獲得「8」的方式，以避免給人一種我想要更小數字的印象。

2010-01-05 Necati

請說明，如果你只有一個或多個類，所以我可以編輯我的答案向您展示如何檢索號碼部分。 – 2010-01-05 13:46:38

是的，divs有其他類（例如'widget'，'my_widget'） – Necati 2010-01-05 13:50:51

我想你應該明確你想要的東西。是否所有的DIV元素都帶有類「my_widget-2」（因爲你寫的是「獲得數字2」）還是你想讓所有的DIV元素具有一個類型爲my_widget-N的類？ – Gumbo 2010-01-05 14:09:43

$("[class*='my_widget']").each (function() { 
    var elClasses = $(this).attr ('class').split (' '); 

    for (var index in elClasses) { 
     if (elClasses[index].match (/^my_widget-\d+$/)) { 
      var classNum = elClasses[index].split ('-')[1]; 
      alert (classNum); 
      break; 
     } 
    } 
});

使用「attributeContains」選擇讓有一類my_widget-*，然後循環通過所有的元素已經爲您搜索類的類的所有元素。一旦找到它，提取數字部分。

來源

2010-01-05 13:35:30

如果元素有多重類，該怎麼辦？startswith對他們不起作用 – BalusC 2010-01-05 13:36:37

他沒有說他有多個類別...... – 2010-01-05 13:37:26

使它成爲「[class * ='my_widget']」，它應該在多個類的情況下工作。 – ryanulit 2010-01-05 13:40:16

如果你想獲得一類my_widget-2的DIV元素，使用這個選擇：

$("div.my_widget-2")

但是，如果你想獲得一類形式my_widget-N的所有DIV元素，其中ñ是任意數，試試這個：

$("div[class]").each(function() { 
    var matches = this.className.match(/(?:^|\s+)my_widget-(\d+)(?:\s+|$)/g); 
    if (matches !== null) { 
     alert(matches); 
    } 
})

來源

2010-01-05 13:38:42 Gumbo

爲什麼選擇投票？ – Gumbo 2010-01-05 13:42:35

我降低了原來的答案，沒有任何意義。現在我無法撤消：\ – 2010-01-05 13:44:30

@JanHančič：爲什麼它沒有任何意義？他只是問如何用類似'my_widget-2'和'my_widget-8'的方式獲得某些DIV元素的「數字2」。如果「數字2」引用類別爲「my_widget-2」的DIV元素，我的上一個答案就非常合理。 – Gumbo 2010-01-05 13:59:05

這應該做的伎倆：

$("[class^='my_widget']").each(function() { 
    var classParts = $(this).attr('class').split('-'); 
    var number = classParts.pop(); 
});

請注意，它只會有一個單數的類，否則你會得到像8 otherclass這樣的結果。

來源

2010-01-05 13:42:52

這裏另一個棘手的部分是，我只想要第一個數字後綴（'2'），而不是其他...不確定如果jQuery是正確的工具接近這個。這整個事情真的是一個WordPress的情況的一部分，但我無法添加我的原始問題，有一個鏈接到這一個。（noob - >需要再等10分鐘左右） – Necati 2010-01-05 13:57:44

基本JS方法：

<div id="x" class="widget-2 lang-日本語">foo</div> 

function Element_getClassArgument(el, name) { 
    var classes= el.className.split(' '); 
    var prefix= name+'-'; 
    for (var i= classes.length; i-->0;) 
     if (classes[i].substring(0, prefix.length)==prefix) 
      return classes[i].substring(prefix.length); 
    return null; 
} 

Element_getClassArgument(document.getElementById('x'), 'widget'); // 2

如果你想包括空白字符，或名稱中的連字符，你必須引進某種類型的編碼方案，例如encodeURIComponent。但是，如果沒有這些，你通常可以逃脫。

在名稱中包含$的東西留給讀者練習。 :-)

來源

2010-01-05 14:27:05 bobince

嘿，好棒！ – BalusC 2010-01-05 14:41:38

我選擇了jQuery的方式，但感謝您的意見。 – Necati 2010-01-05 17:24:28

嘗試 element.attr('class').match(/my_widget-(\d+)/)[1]

應該返回列數爲字符串，因此只在其上運行parseInt函數（）

來源

2016-08-20 03:59:24

如何使用部分類名查找div並獲取該類名的剩餘部分？

回答

相關問題