「之間的」 CSS/jQuery選擇

Question

問題

我怎麼能選擇到它：

• 不在的子/孫元素特定類別（例如.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

UPDATE

在您的評論的光，我做了如下修改小提琴。我希望這是你正在尋找的。

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

查看更新後的小提琴here