搜索分部類的名稱，返回完整的類名

圖片此搜索分部類的名稱，返回完整的類名

<div class="overlay-homepage"><span></span></div>

頁B包含：

<div class="overlay-results"><span></span></div>

我可以用這腳本來識別它們是否包含覆蓋類與此：

function() { 
    var htmlString = $('body').html().toString(); 
    var index = htmlString.indexOf("div class=\"overlay-"); 
    if (index != -1) 
     return("It works"); 
}

對於返回值，而不是「It works」，我該如何獲取它以吸引其他類名，例如「重疊結果」或者如果需要整個內容例如「<div class="overlay-results"><span></span></div>」？

還有很多其他類似的頁面有不同的'overlay'類名，所以我不想每次都搜索一個，因此這種'一刀切'的方法。

來源

2015-11-25 aphextwig

嗨，我認爲這個問題與選擇的答案或許可以幫你這個：http://stackoverflow.com/questions/964119 /如何獲得點擊元素 – groooves

你可以使用正則表達式和重寫它像這樣：

function() { 
    var htmlString = $('body').html().toString(); 
    var matches = htmlString.match(/class="(overlay-[^\s"]*)/); 
    if (matches.length) 
    return(matches[1]); 
}

來源

2015-11-25 15:48:38 Piyin

在jquery中簡單使用.find()。

獲取匹配的元素中的每個元素的後代，由選擇器，jQuery對象或元素過濾。

$(function() { 
    if($('body').find("[class^='overlay-']").length) { 
    alert('it works'); 
    } 
});

來源

2015-11-25 15:34:06

謝謝，但它如何返回完整的類名？ – aphextwig

您可以使用this jQuery選擇，例如

這會給你擁有overlay某處的類名的元素。

$('div[class*=overlay]')

這會給你哪些類的名字與overlay開始元素。

$('td[class^=overlay]')

這會給你哪些類的名字與overlay結束元素。

$('td[class$=overlay]')

編輯：

要使用此對您的代碼，你可以這樣做：

function() { 
    var attr = $('div[class*=overlay]').attr('class'); 
    return(attr); 
});

此函數f 次在他們的類名帶覆蓋的元素返回完整的課程名稱。

來源

2015-11-25 15:35:32

太棒了，在我使用的代碼中看起來如何？ – aphextwig

@aphextwig我編輯了我的答案來添加函數。 –

要選擇一個元素，其中開始與，使用^像[class^="overlay-"]。

要與開始class返回所有的元素，您可以： -

function allOverlays() { 
    // all elements 
    return $('div[class^="overlay-"]'); 

    //or for the first element 
    return $('div[class^="overlay-"]:eq(0)'); 
}

或返回類只有一個的時候，你可以使用： -

function overlayClass() { 
    return $('div[class^="overlay-"]:eq(0)').attr('class'); 
}

或有是多類，使用： -

function overlayClass() { 
    var classes = $('div[class^="overlay-"]:eq(0)').attr('class'); 
    return /overlay-\w+/.exec(classes)[0]; 
}

來源

2015-11-25 15:41:23 BenG

如果我理解正確，你想要滿類與覆蓋圖匹配，而不是元素的屬性類的值。通過使用選擇器進行部分屬性搜索，我們可以獲得與該搜索匹配的所有元素，然後遍歷它們，從它們的類中提取與給出的部分類匹配的元素。

function getFullClass(partialClass) { 
    foundClasses = []; 
    $("[class*='" + partialClass + "']").each(function (i, e) { 
     foundClasses.push($(e).attr("class").split(" ").filter(function (d) { 
      return d.indexOf(partialClass) >= 0 
     })); 
    }); 
    return foundClasses; 
} 

//Callable like: 
getFullClass("overlay-");

將輸出：[overlay-homepage,overlay-results]或什麼是頁面上，如果你只想要一個結果，你可以簡單地做getFullClass("overlay-")[0]

來源

2015-11-25 15:43:57

使用SMACSS方法（https://smacss.com/book/），你可以根據模塊化您的網站不同區域佈局和結構。頁面佈局獲取應用基本樣式和通用樣式的頂級類，並且通過名稱間隔類來應用任何頁面特定樣式。例如，所有疊加層都有.ovr類，這表明它是覆蓋層，.ovr-homepage,.ovr-results類將應用並且具有獨特的樣式。

你可以得到所有覆蓋模塊$('body .ovr');或與$('body .ovr-homepage');或$('body .ovr.ovr-homepage');特定覆蓋。

而不是用JS過度複雜它可以用CSS結構和組織解決。

來源

2015-11-25 15:46:32 jshaw3

搜索分部類的名稱，返回完整的類名

回答

相關問題