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是否包含文本Elements，以及h1旁边的p是否包含Black。我知道如何做一个只有一个逗号的OR运算符，但我试图实现一个AND运算符。

我也可以将其更改为if语句，但我不知道如何制作它。

＆＃34;如果第一个选择器和第二个选择器返回true，找到按钮[name =＆＃39; commit＆＃39;]，执行过滤功能，然后单击。＆＃34;

    <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

从你的评论（可能会被清理）：

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

将其与您的第一个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中找到包含button类和name commit的所有元素。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

1 个答案: