2

次のjQueryコードがあります：

$("body.page-calendar-practices-2012-05 #content-header h1#title")

これは正常に動作します。それを使用して、ページの html を変更できます。しかし、私は本当に「page-calendar-practices」で始まる本文にクラスがあるページを選択したいと思っています。つまり、日付が異なる他のページが含まれます。私は次のことを試しました：

$("body[class^=page-calendar-practices] #content-header h1#title")

そしてそれはうまくいきませんでした。なにが問題ですか？

編集- HTML は次のとおりです。

<body class="not-front logged-in page-calendar two-sidebars page-calendar-practices-2012-05 section-calendar" >
4

3 に答える 3

5

[class^=page-calendar-practices]class 属性が「page-calendar-practices」で始まる要素のみを選択します。そのクラスの 1 つが「page-calendar-practices」で始まる要素ではありません。

したがって、次のような要素が選択されます。

<body class="page-calendar-practices-2012-05">

*セレクターを使用できます：

$('body[class*=page-calendar-practices]')

ただし、次も選択されます。

<body class="page some-page-calendar-practices">

または、次の簡単なチェックでフィルタリングできます。

$('body').filter(function() {
    return ~(' ' + this.className).indexOf(' page-calendar-practices');
}).find('#content-header h1#title');

これは、単純な「含む」セレクターよりも少し冗長ですが、より正確です。

これがフィドルです：http://jsfiddle.net/DR9K4/

簡単にするために、次のように独自のフィルターを jQuery に追加できます。

jQuery.expr[':']['class-starts']​ = function(el, i, m) {
    return ~(' ' + el.className).indexOf(' ' + m[3]);
};

そして、好きな場所でそれを使用するだけです：

$('body:class-starts(page-calendar-practices)');

ここで実際に見てください：http://jsfiddle.net/gEJeW/

更新: jQuery 1.8 では、Sizzle エンジンが完全に書き直されました。更新の一環として、式拡張アーキテクチャも作り直されたため、上記の関数は機能しなくなりました。

jQuery 1.8 以降を使用している場合は、次のようにします。

$.expr[':']['class-starts'] = $.expr.createPseudo(function (arg) {
    return function (el) {
        return ~(' ' + el.className).indexOf(' ' + arg);
    };
});

これがフィドルです：http://jsfiddle.net/gEJeW/2/

詳細については、こちらを参照してください: jQuery 1.8 のカスタム フィルター セレクターで「一致」オブジェクトを取得する

于 2012-06-20T18:27:04.490 に答える
2

あなたの試みは、文字列で始まるその属性の特定のクラス名ではなく、文字列で始まるクラス属性を探しています。

おそらく、属性 contains ロジックを使用できると思います。

$("body[class*='page-calendar-practices'] #content-header h1#title")

これは、それで始まらないクラス名と一致する可能性がありますが、そのようなクラス名を使用する可能性は低いと思われます。

正確にしたい場合は、単純なセレクターでそれを行うことはできないと思います-おそらくいくつかのjavascriptロジックが必要になるでしょう:

$(document.body).filter(function() {
    return((" " + this.className).indexOf(" page-calendar-practices") != -1);
}).find("#content-header h1#title");
于 2012-06-20T18:29:18.617 に答える
1

http://api.jquery.com/attribute-starts-with-selector/

jQuery('[attribute^="value"]')

説明: 指定された文字列で始まる値を持つ、指定された属性を持つ要素を選択します。

あなたのものはそれで始まっていません-一致する文字列が途中にあります

*セレクターを使用したい: http://api.jquery.com/attribute-contains-selector/

于 2012-06-20T18:28:30.250 に答える