如何將所有ul和li保留在父li下：selected，但刪除其他導航項

Question

我只需要將UL和LI保留在選定的父項下，而刪除在此之前或之后發生的所有其他事件。

例如，給定：

<ul id="fruit">
    <li class="selected"> Red </li>
        <ul> Sweet </ul>
            <li> Cherry </li>
            <li> Apple </li>
        <ul> Tart </ul>
    <li> Yellow <li>
    <li> Green </li>

我需要：

    <li class="selected"> Red </li>
        <ul> Sweet </ul>
            <li> Cherry </li>
            <li> Apple </li>
        <ul> Tart </ul>

我已經嘗試過$（“。fruit li：not（.selected）”）; 但是，這會刪除所有包含li和ul的孩子。 我也試過

$( document ).ready(function() {

  $('.s4-ql li').each(function(){
    if($(this).parent.attr('selected') == 'selected'){
    $(this).css("display", "initial");
    }
else {
  $(this).css("display", "none");

}
});

謝謝！

Answer 1

假設您將HTML更正為有效的HTML，如下所示：

<ul id="fruit">
    <li class="selected"> Red 
        <ul>
            <li> Sweet </li>
            <li> Cherry </li>
            <li> Apple </li>
            <li> Tart</li> 
      </ul>
    </li>
    <li> Yellow </li>
    <li> Green </li>
</ul>

然后，您可以像這樣分離您選擇的對象。

var $selected = $('#fruit').find('.selected').detach();

這是一個簡單的$（'＃fruit'）的remove（），您選擇的就是您想要保留的部分。 https://jsfiddle.net/n25qbmLo/

看起來您的Sweet和Tart是子標題，因此，如果是這樣，您的HTML應該是這樣的：

<ul id="fruit">
    <li class="selected"> Red 
        <ul>
          <li> Sweet 
              <ul>
                <li> Cherry </li>
                <li> Apple </li>
              </ul>
          </li>
          <li> Tart</li> 
      </ul>
    </li>
    <li> Yellow </li>
    <li> Green </li>
</ul>

https://jsfiddle.net/n25qbmLo/2/