CSS / jQuery选择器之间

Question

问题

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

• 不是特定类别的子级/孙级元素的元素（例如.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

编辑

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

您可以使用自定义过滤器功能来完成您要达到的目标。

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

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

在这里查看工作小提琴

UPDATE

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

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

在这里查看更新的小提琴