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;
});

在這里查看更新的小提琴