javascript - 使用 jQuery 选择不包含 <span class ="foo"> 的 <p> 元素(选择性切换的最终目标)

Question

我正在尝试使用不包含特定类的 span 元素的某些段落元素创建 $(selector) ，例如:在以下示例文本中，

/* HTML */
<button id="buttonFoo">ButtonFoo</button>
<p> 
    Lorem ipsum...
    <span class="foo">FOO</span>
    Excepteur sint...
</p>

<p>
    Lorem ipsum...
    <span class="foo">FOO</span>
    Duis aute...
    <span class="bar">BAR</span>
    Excepteur sint...
</p>

<p>Lorem ipsum...
    <span class="foo">FOO</span>
    Duis aute...
    <span class="bar">BAR</span>
    Excepteur sint...
</p>

<p>
    Lorem ipsum...
    <span class="foo">FOO</span>
    Excepteur sint...
</p>

<p>
    Lorem ipsum...
    <span class="thing">THING</span>
    Excepteur sint...
</p>

<p>
    Lorem ipsum...
    <span class="thing">THING</span>
    Excepteur sint...
</p>

通过单击 id 为 buttonFoo 的按钮，我希望能够切换不包含 class="foo"的 span 的段落元素。

我已经尝试过

/* JS/jQuery */
$(document).ready(function() {
    $("#buttonFoo").click(function(){
        $(':not(:contains('+ <span class="foo" +'))').toggle(); 
    });
});

这可能是一个非常琐碎的问题和一个琐碎的答案，但我是编程新手，所以非常感谢您的输入!谢谢。

Answer 1

我认为您正在寻找:

$('#buttonFoo').on('click', function(){
    // selects all <p> elements that are not containing
    // any elements that have an element of class="foo"
    // as a descendant:
    $('p:not(:has(.foo))')
        // and then toggles their visibility:
        .toggle();
});

$('span.foo').closest('p').addClass('fooHighlight');
$('#buttonFoo').on('click', function() {
  $('p:not(:has(.foo))').toggle();
});

.fooHighlight {
  background-color: #ffa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="buttonFoo">ButtonFoo</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="foo">FOO</span> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span class="foo">FOO</span> Duis
  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="bar>BAR</span> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span class="
  foo ">FOO</span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="bar>BAR</span>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
  laborum.
</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="foo">FOO</span> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="thing">THING</span> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="thing">THING</span> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

但是您没有发布 <p>元素似乎包含任何 <span> class="foo" 的元素，所以我可能误读了你的问题。

引用文献:

• :has() .
• :not() .
• toggle() .