検索、完全なクラス名を返す

Question

画像この：

ページAはbodyでこれを含んでいます

<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"); 
} 

戻り値として、「それは動作します」ではなく、残りのクラス名を取得するにはどうすればよいですか？ 「オーバーレイ - 結果」または必要ならばdivの内容全体である。 "<div class="overlay-results"><span></span></div>"？

'overlay-'のクラス名が異なるこのようなページがたくさんあるので、私はこのためにそれぞれ1つの検索をしたくないので、この「1つのサイズはすべてに合っています」アプローチです。

Answer 1

あなたは正規表現を使用して、このようにそれを書き換えることができます：

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

Answer 2

簡易使用.find() in jquery。

は一致 セレクタによってフィルタリング要素は、jQueryオブジェクト、または要素の現在のセット内の各要素の子孫を取得します。

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

Answer 3

あなたはこれがあなたに彼らのクラス名のどこかにoverlayを持っている要素を与える例

ため、this jQueryのセレクタを使用することができます。

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

これは、あなたのクラス名はoverlayで始まる要素を提供します。

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

これは、あなたのクラス名はoverlayで終わる要素を提供します。

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

EDIT：

あなたが何かを行うことができますあなたのコードでこれを使用するには：自分のクラス名aに

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

にこの関数fi NDオーバーレイを持つ要素を返します。完全なクラス名。

Answer 4

がで始まる要素を選択するには、のように[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]; 
} 

Answer 5

正しく理解していただきたい場合はオーバーレイと一致するフルクラスであり、要素の属性クラスの値ではありません。セレクタで部分的な属性検索を行うことで、検索にマッチするすべての要素を取得し、与えられた部分クラスに一致する要素をクラスから抽出して繰り返します。

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]またはものは何でも一つだけの結果をしたい場合、あなたは単にあなたがベースのサイトの異なる領域をモジュール化することができますSMACSS方法論（https://smacss.com/book/）を使用してgetFullClass("overlay-")[0]

Answer 6

を行うことができ、ページ上にありますレイアウトと構造。ページのレイアウトは、基本スタイルと汎用スタイルを適用するトップレベルクラスを取得し、任意のページ固有スタイルは名前空間クラスを使用して適用されます。たとえば、すべてのオーバーレイは、それがオーバーレイであることを示す.ovrクラスを持ち、.ovr-homepage,.ovr-resultsクラスが適用され、ユニークなスタイルが適用されます。

すべてのオーバーレイモジュールを$('body .ovr');または特定のオーバーレイを$('body .ovr-homepage');または$('body .ovr.ovr-homepage');にすることができます。

JSでそれを過度にするのではなく、CSS構造と組織で解決できます。