“介于”CSS/jQuery 选择器

Question

问题

鉴于 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>

我尝试了上面的脚本，但它似乎不起作用。

目标

能够选择并将 yellow 元素更改为 violet。

Answer 1

编辑

抱歉，误解了您的问题，因此重写了整个答案。

您在此处尝试实现的目标可以使用自定义过滤器功能来完成。

理论很简单，您选择所有满足特定条件的元素（包括作为特定选择器的子/孙的元素），然后根据父/祖父条件过滤您的集合

var myElements = $('strong, i').filter(
    function() {
      return $(this).parents('.context').length < 1;
    });

见工作小提琴here

更新

根据您的评论，我对小提琴进行了以下更改。我希望这就是你要找的。​​p>

var myElements = $('strong, i', '.context').filter(
function() {
  return $(this).parent('.context .paragraph').length < 1;
});

查看更新的小提琴here