问题
给定一个元素的 jQuery 选择 (.context
),我如何选择它:
- 不是特定类的子元素/孙元素(例如
.paragraph
)[该类本身可以有更深的嵌套级别,例如.paragraph .paragraph
] - 具有特定标记集的子/孙元素(例如
strong
|i
)
注意事项
.context
可以是另一个.context
或另一个.paragraph
的后代。- 我要选择的元素可以通过
[data-hint^="I want"]
选择器来识别(显然data属性在实际场景中是不存在的)。 - 我不仅想要
.context
的直接子代,还想要后代(显然过滤掉.context .paragraph
中包含的元素。
战场
$selection = $('.context').first();
$formatting_elements = $selection.find('strong, i')
.not('.paragraph *');
.paragraph {
margin: 15px;
position: relative;
border: 1px solid black;
}
.paragraph .paragraph {
border: 1px solid #444;
}
.paragraph .paragraph .paragraph {
border: 1px solid #888;
}
.context {
margin: 15px;
position: relative;
background-color: limegreen;
}
[data-hint^="I want"] {
background-color: violet;
}
.paragraph:before {
content: '-paragraph-';
position: absolute;
bottom: 100%;
left: 200px;
}
.context:before {
content: '-context-';
position: absolute;
bottom: 100%;
left: 200px;
color: green;
}
.context .paragraph:before {
font-style: italic;
color: #444;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="paragraph">
<i>bar</i>
<div class="paragraph">
<strong>foo</strong>
<i>bar</i>
<div class="context" data-hint="Find elements relative to this element">
<i data-hint="I want to get this">foo</i>
<div class="paragraph">
<i>bar</i>
<div class="paragraph">
<strong>foo</strong>
<div class="paragraph">
<strong>foo</strong>
<i>bar</i>
</div>
<i>bar</i>
</div>
</div>
<strong data-hint="I want to get this">foo</strong>
<i data-hint="I want to get this">bar</i>
</div>
</div>
</div>
我试过上面的脚本,但它似乎不起作用。
目标
能够选择并将黄色元素更改为紫色。
最佳答案
编辑
抱歉,误解了您的问题,因此重写了整个答案。
您在这里尝试实现的目标可以使用自定义过滤器函数来完成。
理论很简单,您选择所有满足特定条件的元素(包括某些特定选择器的子/孙元素),然后根据父/祖 parent 条件过滤您的集合
var myElements = $('strong, i').filter(
function() {
return $(this).parents('.context').length < 1;
});
参见工作 fiddle here
更新
根据您的评论,我对 fiddle 进行了以下更改。我希望这就是您要找的。p>
var myElements = $('strong, i', '.context').filter(
function() {
return $(this).parent('.context .paragraph').length < 1;
});
查看更新的 fiddle here
关于javascript - "between"CSS/jQuery 选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35533532/