具有多个元素的 jQuery 选择器，包括 AND 运算符

Question

如何为这个 jQuery 选择器添加不同元素的 AND 运算符？

$("h1:contains('Elements') && p:contains('Black')").nextAll().find(".button[name='commit']").each(function(i, that){
            $('[name=size] option').filter(function() { 
                return ($(this).text() == 'Small');
            }).prop('selected', true);
            setTimeout(function(){
                $(that).click();
            }, 200*i);

        });

此功能由按钮触发。我希望这个函数检查 div 中的 h1 是否包含文本元素，以及 h1 旁边的 p 是否包含黑色。我知道如何做一个只有一个逗号的 OR 运算符，但我正在尝试实现一个 AND 运算符。

我也可以把它改成 if 语句，但我不知道怎么做。

"如果第一个选择器和第二个选择器返回true，找到按钮[name='commit']，执行过滤功能然后点击。"

    <div class="item1">
    <h1>Abstract</h1>
    <p>White</p>
    <div id="form">
        <form>
            <input>
            <fieldset>
                <select name="size">

                </select>
            </fieldset>
            <fieldset>
                <input class="button" name="commit">
            </fieldset>
        </form>
    </div>
</div>

<div class="item2">
    <h1>Elements</h1>
    <p>Black</p>
    <div id="form">
        <form>
            <input>
            <fieldset>
                <select name="size">

                </select>
            </fieldset>
            <fieldset>
                <input class="button" name="commit">
            </fieldset>
        </form>
    </div>
</div>

Answer 1

来自您的评论（可能会被清理）：

我希望此函数检查div 中的h1 是否包含文本元素，以及h1 旁边的p 是否包含黑色。

将它与您的第一个 JavaScript 块结合起来，您正在寻找的是：

$("h1:contains('Elements') + p:contains('Black')").nextAll("div").find(".button[name='commit']")...

细分：

• $("h1:contains('Elements') + p:contains('Black')") 使用 adjacent sibling combinator (+) 仅匹配包含 Elements 的 h1，前提是它紧随其后的是包含 Black 的 p。
• .nextAll("div") 查找所有以下同级 div 元素
• .find(".button[name='commit']") 查找这些 div 中具有 button 和 name commit 类的任何元素。

实时示例（半秒后将相关按钮变为蓝色；我为它们添加了type="button" 和value="commit" 用于sn-p）：

setTimeout(function() {
  $("h1:contains('Elements') + p:contains('Black')").nextAll("div").find(".button[name='commit']").css({
    color: "blue",
    fontWeight: "bold"
  });
}, 500);

<div class="item1">
  <h1>Abstract</h1>
  <p>White</p>
  <div id="form">
    <form>
      <input>
      <fieldset>
        <select name="size">

                </select>
      </fieldset>
      <fieldset>
        <input class="button" type="button" name="commit" value="commit">
      </fieldset>
    </form>
  </div>
</div>

<div class="item2">
  <h1>Elements</h1>
  <p>Black</p>
  <div id="form">
    <form>
      <input>
      <fieldset>
        <select name="size">

                </select>
      </fieldset>
      <fieldset>
        <input class="button" type="button" name="commit" value="commit">
      </fieldset>
    </form>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

旁注：您引用的 HTML 有两个元素，其中包含 id="form"。 id 值必须在文档中是唯一的。