0

.on() を使用して委任されたイベントで jQuery セレクターを使用する方法はありますか? そして、セレクターで直接の子のみを選択するにはどうすればよいでしょうか? <div>以下はコードのサンプルです: 要素の直接の子のみをフィルター処理したいと思います。<section>その子の少なくとも 1 つに<p>«hello» という単語が含まれている必要があります。この例では、2 番目のみ<div>がフィルタリングされます。問題は、<div>後で他のものを追加できるため、イベントを委任する必要があることです。

.live() メソッドを使用すると、私が使用できたように、より単純になりました。

$('section > div').filter(function(){return /hello/.test(p) }).live('mouseenter', function(){ ... })

しかし、現在は非推奨になっているため、代わりの .on() は委任されたイベントで純粋な CSS のようなセレクターのみを許可します。<p>前述の 2 つの条件 (直接の子とhello を含む)に基づいてこれらの要素をフィルター処理する方法について誰か考えていますか? ありがとう

<section>
    <div>
        <p>abc</p>
        <div>
            <p>def</p>
            <p>hello</p>
        </div>
    </div>
    <div>
        <p>hello world</p>
        <p>test</p>
    </div>
</section>

編集: JS サンプルを追加するのを忘れていました。p:contains('hello') がセレクターとして十分でないように条件を少し変更しています。

$('section').on({
    mouseenter: function(){
        $(this).css('background-color','red');
    }
},
    $('div').filter(function(){
        var p = $(this).children('p').filter(function(){
            return /hello/.test($(this).text());
        });
        return p.length > 2;
    })
);
4

2 に答える 2

3 
$('section').on('mouseenter', '> div > p:contains("hello")', function(){ ... })

div にイベントを設定するには、関数内で条件を設定する必要があります

  $('section').on('mouseenter', '> div', function(){ 
      if ($(this).find("> p:contains("hello")").get(0)) {

         // ...
        }
   })

私のコードでいつもそうしているように、それは怠惰でした。イベントをドキュメントに添付して委任する方が良いです。jqueryはその方法ではるかに高速に動作します+イベントがトリガーされるかどうかを気にせずに要素を動的に追加できます（トリガーされます）

 $(document).on(...
于 2013-01-17T21:10:36.043 に答える
2

ネイキッド コンビネータを使用して、has疑似クラスであっても、コンテキストの子をターゲットにすることができます。

$('section').on('mouseenter', '> div:has(> p:contains("hello"))', ...

ただし、避けることをお勧めします ( とは互換性がありませんquerySelectorAll)。考慮してください（2つではなく1つのネイキッドコンビネーターのみ）：

$(document).on('mouseenter', 'section > div:has( > p:contains("hello"))`, ...

2 番目のフィルター (「hello」というテキストを持つ 2 つ以上の子を持つ div) は、CSS では少しワイルドですが、それでも可能です:

$('section').on('mouseenter', 'div:has(>'+
  '  p:contains("hello") '+
  '~ p:contains("hello") '+
  '~ p:contains("hello") '+
')', ...

他のすべてが失敗した場合は、セレクターとハンドラー内のメインフィルターを介して事前フィルター処理を行うことができます。

$(document).on('mouseenter', 'section > div', function(){
  if($(this).children('p:contains("hello")').length > 2){
    ...
  }
})

iswith コールバックでも機能します。

function valid (){...}

$(document).on('mouseenter', 'section > div', function(){
  if($(this).is(valid)){
    ...
  }
})
于 2013-01-17T21:43:34.573 に答える