javascript - "between"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>

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

目标

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

Answer 1

编辑

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

您在这里尝试实现的目标可以使用自定义过滤器函数来完成。

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

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

参见工作 fiddle here

更新

根据您的评论，我对 fiddle 进行了以下更改。我希望这就是您要找的。

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

查看更新的 fiddle here