1

Web アプリケーションに JQuery を使用しています。この状況でのセレクターの書き方がわかりません。

<a class="abc def xyz-delete-confirm efg">text</a>

<a class="abc def delete-confirm">text</a>

「-delete-confirm」で終わるクラスまたは「delete-confirm」というクラスを持つすべてのリンクを見つける必要があります。

「delete-confirm」と呼ばれるクラスを持つ状況を処理する方法を知っています。「-delete-confirm シチュエーション」はどうですか？1 つのセレクターで 2 つの状況をカバーできますか?

ご意見ありがとうございます。

よろしく。

4

2 に答える 2

8

このように組み合わせることができます。

var $allofthem = $('[class$="-delete-confirm"],.delete-confirm');

これは単なる属性値であるため、クラス名が要素のクラスのリストの最後に表示され、で終わる場合はセレクターで終わることに注意してください-delete-confirm。

末尾セレクターとクラス セレクターの組み合わせを使用します。

純粋な選択の場合、これを行うことができます（classListのどこに表示されるか、またはいくつのクラスがあるかは関係ありません）：

var regExp = /-delete-confirm(\s|$)/; //I am sure regex can be improved

var $allofthem = $('a').filter(function(){
    return regExp.test(this.className) || $(this).is('.delete-confirm');
});

デモ

于 2013-07-02T04:37:41.360 に答える
3

クラスは単なる別の属性ですか?

この種の状況の問題は、クラスを単なる別の属性として扱い、属性セレクターを使用しても、一貫した方法で探しているものがほとんど得られないことです。

注意すべきいくつかの項目:

  • アイテムに複数のクラスがある場合でも機能しますか?
  • アイテムに複数のクラスがあり、照合するクラスが属性値に最初に表示されるクラスである場合、機能しますか?
  • 最後だったら？
  • 探しているクラス名を含むクラスがアイテムにある場合、機能しますか? （あなたの例では、多分no-delete-confirm-available）？

classクラスを動的に追加および削除する場合、属性の値を取得したときにクラスがどの順序で表示されるかは保証されないことにも注意してください。

非常に厳密な一連の状況がある場合、これが使用されます。特に、要素が 1 つのクラスしか持たない場合は、属性セレクターが機能する可能性があります。それ以外の場合は、別のアプローチを使用することをお勧めします。

別のクラス

これを処理する適切な方法は、別のクラスを使用することです。クラスを追加するプロセス*-delete-confirmに別のクラスを追加することもできhas-delete-confirmます。次に、それを選択でき、クラス属性について心配する必要はありません。

すべて選択してから filter()

理想的ではありませんが、属性セレクターよりもうまく機能する別のオプションは、可能なすべての要素を選択filter()し、正規表現を使用して一致するクラスを見つけるコールバック関数を使用して結果を取得することです。

たとえば、要素がすべて の<a>子である#links場合、次のように使用できます。

$('#links a').filter(function () {
    return /(^|\s|-)delete-confirm(\s|$)/.test($(this).attr('class'));
});

この同様の質問も興味深いと思うかもしれません:
jQuery:How to select elements with specific class here?

于 2013-07-02T04:47:44.980 に答える