0

有没有办法在 .on() 的委托事件中使用 jQuery 选择器？您将如何在选择器中仅选择直接子级？下面是一个代码示例：我想只过滤元素的直接<div>子<section>元素，并要求它们的子元素中至少有一个<p>包含单词«hello»。在这个例子中，只有第二个<div>会被过滤。问题是<div>之后可以添加其他，因此必须委托事件。

.live() 方法的使用使它更简单恕我直言，因为我可以使用：

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

但由于它现在已被弃用，它的替代 .on() 只允许在委托事件中使用纯 CSS 类选择器。有没有人知道如何根据上述两个条件（直系子女和<p>包含你好）过滤这些元素？谢谢

<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）。考虑（只有一个裸组合器而不是两个）：

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

您的第二个过滤器（具有两个以上带有文本“hello”的子元素的 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 回答