Question

我正在尝试构造一个jQuery选择器，以选择包含某个单词的h1，然后找到伴随h1的按钮。

这是我无法改变的HTML结构。

<div class="item1">
<h1>Title</h1>
<div id="cctrl">
    <form>
        <input>
        <input>
        <fieldset>
            <input class="button" type="submit" value="submit">
        </fieldset>
    </form>
</div>

我正在尝试根据h1标题选择提交按钮。例如：如果h1标题是John，我想找到靠近它的那个确切h1标题的按钮并单击它。

为此，我尝试使用.each（）方法。

$("h1:contains('John')>.button[value='submit']").each(function(){

    $(this).click();
});

如果存在更多具有h1标题John的按钮，我希望每种方法都能单击所有按钮。但是我的jQuery没有按照我想要的方式工作而且我现在卡住了。有谁知道如何解决这个问题？

Answer 1

您需要使用.next()在DIV之后转到H1，然后使用find()在其中搜索。

$(".button").click(function(e) {
  e.preventDefault();
  console.log(this.id);
});

$("h1:contains(John)").next().find(".button[value=submit]").click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Title</h1>
<div class="cctrl">
  <form>
    <input type="text" value="Bla bla">
    <input type="text" value="Bla bla">
    <fieldset>
      <input id="button1" class="button" type="submit" value="submit">
    </fieldset>
  </form>
</div>
<h1>John Smith</h1>
<div class="cctrl">
  <form>
    <input type="text" value="Bla bla">
    <input type="text" value="Bla bla">
    <fieldset>
      <input id="button2" class="button" type="submit" value="submit">
    </fieldset>
  </form>
</div>
<h1>Title</h1>
<div class="cctrl">
  <form>
    <input type="text" value="Bla bla">
    <input type="text" value="Bla bla">
    <fieldset>
      <input id="button3" class="button" type="submit" value="submit">
    </fieldset>
  </form>
</div>
<h1>Papa John</h1>
<div class="cctrl">
  <form>
    <input type="text" value="Bla bla">
    <input type="text" value="Bla bla">
    <fieldset>
      <input id="button4" class="button" type="submit" value="submit">
    </fieldset>
  </form>
</div>

Answer 2

您的input不是h1的孩子，因此请使用+ next Selector代替>来选择包含输入的div，然后使用find()方法在每个里面。请记住将id的{{1}}更改为cctrl，以便您可以使用class，或者如果您不使用div.cctrl：

+div

或者更简单，你不需要$("h1:contains('John') + div.cctrl").each(function(){ $(this).find(".button[value='submit']").click(); });功能：

each

＆＃13;

$("h1:contains('John') + div.cctrl").find(".button[value='submit']").addClass("blue");

＆＃13;

$("h1:contains('John') + div.cctrl").find(".button[value='submit']").addClass("blue");

＆＃13;

.blue{
  background-color: blue;
}

＆＃13;

h1的jQuery选择器包含一个按钮

2 个答案: