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 语句，但我不知道该怎么做。

"If the 1st selector and 2nd selector returns true, find the button[name='commit'], execute the filter function and then click."

    <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

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

I want this function to check if the h1 in the div contains the text Elements and if the p alongside the h1 contains Black.

将其与您的第一个 JavaScript 块相结合，您要寻找的是：

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

细分：

$("h1:contains('Elements') + p:contains('Black')") 使用 adjacent sibling combinator (+) 仅匹配包含元素的 h1，前提是紧跟其后的 p 包含黑色。
.nextAll("div") 找到所有后续 div 元素
.find(".button[name='commit']") 查找那些 div 中具有 class button 和 name commit.

实时示例（半秒后将相关按钮变为蓝色；我为代码段添加了 type="button" 和 value="commit"）：

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 值必须在文档中是唯一的。

jQuery 包含 AND 运算符的多个元素的选择器

jQuery selector with multiple elements including an AND operator

html

javascript

jquery

jquery-selectors