“之间”CSS / jQuery选择器

Question

问题

给定jQuery选择一个元素（.context），我该如何选择它：

• 不是特定类的子/孙的元素（例如.paragraph）[该类可以具有更深层次的嵌套级别，例如.paragraph .paragraph]
• 包含特定标记集的子/孙元素（例如strong | i）

注释

• .context可以是其他.context或其他.paragraph的后代。
• 我想要选择的元素可以由[data-hint^="I want"]选择器标识（显然，实际场景中不存在数据属性）。
• 我不仅仅想要.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>

我尝试了上面的脚本，但似乎没有用。

目标

能够选择并更改黄色元素为紫色。

Answer 1

修改

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

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

理论很简单，你选择符合特定标准的所有元素（包括某个特定选择器的子/孙子），然后根据父/祖父母标准过滤你的设置

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

请参阅工作小提琴here

<强>更新

根据你的评论，我对小提琴做了以下修改。我希望这就是你要找的东西。

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

请参阅更新的小提琴here