代码之家 › 专栏 › 技术社区 › Sam

jQuery选择子代,包括父代

descendant parent jquery-selectors jquery

Sam · 技术社区 · 17 年前

考虑下面的HTML:

<div class="foo" id="obj">
   I should be changed red
   <div class="bar" style="color:black;">
      I should not be changed red.
      <div class="foo">I should be changed red.</div>
   </div>
</div>

obj 还有一个表达式,我该如何选择任何子对象,以及可能的子对象 ? 我正在寻找类似于“选择子代”的内容,但如果它与表达式匹配,还包括父代。

var obj = $("#obj")[0];

//wrong, may include siblings of 'obj'
$(".foo", $(obj).parent()).css("color", "red");

//wrong -- excludes 'obj'
$(".foo", obj).css("color", "red");

//correct way, but it's annoying
var matches = $(".foo", obj);
if ($(obj).is(".foo")) matches = matches.add(obj);
matches.css("color", "red");

8 回复 | 直到 12 年前

tvanfosson 12 年前

如果我理解正确:

$(currentDiv).contents().addBack('.foo').css('color','red');

为了清楚起见,我将“div”重命名为“currentDiv”。这将选择当前元素及其包含的所有元素,然后过滤掉没有类的元素 foo 福 .

编辑

$(currentDiv).find('.foo').addBack('.foo').css('color','red');

此答案已更新,以合并新的jQuery方法。原来是

$(currentDiv).find('.foo').andSelf().filter('.foo').css('color','red');

对于早于1.8的jQuery仍然需要

Andrew 13 年前

引入jquery1.8 .addBack() ,它需要一个选择器,支持.andSelf()。因此tvanfosson的代码比

$(currentDiv).find(".foo").addBack(".foo").css("color", "red");

$(currentDiv).find(".foo").add(currentDiv.filter(".foo")).css("color", "red");

Community Mohan Dere 9 年前

Andrew's Sam

分机代码:

jQuery.fn.findAndSelf = function (selector){
    return this.find(selector).addBack(selector);
};

这样使用:

$(function(){
    $('#obj').findAndSelf('.foo').css('color', 'red');
});

http://jsfiddle.net/BfEwK/

完全归功于安德鲁的建议 addBack()

Sam 17 年前

除非有更好的解决方案,否则我创建了一个新函数,并使用它代替$:

var _$ = function(expr, parent){ 
   return $(parent).is(expr) ? $(expr, parent).add(parent) : $(expr, parent); 
}

iCollect.it Ltd 12 年前

如果我没弄错的话,你能不能就这样做?

$("#obj").css("color", "red").find(".foo").css("color", "red");

找到目标对象/元素应用CSS,然后使用所述选择器查找所述对象/元素内的所有对象/元素,然后将CSS应用于is?

Josh Crozier HBP 10 年前

选择的较短方法 全部的

$('*', '#parent').addBack();

这与:

$('#parent').find('*').addBack();

$('*', '#parent').addBack().css('border', '1px solid #f00');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <span>Child</span>
  <span>Another child</span>
</div>

当然,您可以将通用选择器更改为所需的元素。

$('.foo', '#parent').addBack();

或

$('#parent').find('.foo').addBack();

-1

cLFlaVA 17 年前

这不是你想要的吗(除非我误解了…)

$(document).ready(function(){
    $("div.foo").css("color", "red");
});

-1

rz. 17 年前

 $('div.foo, div.foo > *').css('color','red');

其主要思想是,您可以使用逗号分隔不同的规则以进行匹配。就像css中一样。就我所知一切 here 由jquery支持,可以通过逗号分隔“或”。