Question

我只需保留UL＆amp;选定父级下的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）”）;然而，这包括删除所有孩子李和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（），你选择的是你想保留的部分。 AsyncTask

看起来你的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/

如何将所有ul和li保留在父li：选中，但删除其他导航项

1 个答案: