jQuery selector for h1 contains and a button

Question

I'm trying to construct a jQuery selector to select both a h1 that contains a certain word and then find the button that's accompanied by the h1.

This is the HTML structure that I can't change.

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

I'm trying to select the submit button on basis of the h1 title. So for example: If h1 title is John, I want to find the button that has that exact h1 title near it and click it.

To do this I tried to use an .each() method.

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

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

If more buttons with the h1 title John exist, I want to each method to click all of them. But my jQuery isn't working how I want it to and I'm stuck right now. Does anyone know how to fix this?

You are not to include the dot when providing a class to the `class` attribute. (`class=".button"` should be `class="button"`) — George, Nov 07 '17 at 16:32
Your selector is expecting the button to be a child of the h1. It is not in your markup. — Taplar, Nov 07 '17 at 16:33
https://stackoverflow.com/questions/4191386/jquery-how-to-find-an-element-based-on-a-data-attribute-value — nikunjM, Nov 07 '17 at 16:34

Barmar · Answer 1 · 2017-11-07T17:23:43.853

You need to use .next() to get to the DIV after the H1, then use find() to search inside that.

$(".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>

See this works, but it only works for the first button it finds and it won't trigger all the buttons if there are multiple h1s with the name John in it — xSketchy0, Nov 07 '17 at 17:15
It should find them all. But you can only submit one form at a time, if that's what clicking on the submit button does. — Barmar, Nov 07 '17 at 17:18
I've added a snippet that shows that it triggers all the buttons that are after a heading with `John` in it. — Barmar, Nov 07 '17 at 17:25

SilverSurfer · Answer 2 · 2017-11-07T19:38:46.390

Your input is not a child of h1 so use + next Selector instead of > to select the div wich contains the input and then use find() method inside each. Remember change id of cctrl to class so you can use div.cctrl, or if you wont use only +div:

$("h1:contains('John') + div.cctrl").each(function(){
    $(this).find(".button[value='submit']").click();
});

Or even more simple you dont need each function:

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

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

.blue{
  background-color: blue;
}

<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 class="button" type="submit" value="submit">
        </fieldset>
    </form>
</div>
<h1>John</h1>
<div class="cctrl">
    <form>
        <input type="text" value="Bla bla">
        <input type="text" value="Bla bla">
        <fieldset>
            <input 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 class="button" type="submit" value="submit">
        </fieldset>
    </form>
</div>
<h1>John</h1>
<div class="cctrl">
    <form>
        <input type="text" value="Bla bla">
        <input type="text" value="Bla bla">
        <fieldset>
            <input class="button" type="submit" value="submit">
        </fieldset>
    </form>
</div>

Alright so if I have 2 div items containing John Doe and John Day, I'm able to find the h1 with: $("h1:contains('John')").each(function(){ console.log(this); }); This will show the two h1s that exist, but if I add the "+ div.cctrl" to the selector and try to find the button with .find(), it won't return anything. Do you know why? It just says [prevObject: init(1), context: document, selector: "h1:contains('John') + div.cctrl"] — xSketchy0, Nov 07 '17 at 16:57
Also shouldn't the + div.cctrl be + div#cctrl since it's an id instead of a class? — xSketchy0, Nov 07 '17 at 17:00
In your snippet you added multiple cctrl divs in item1. In my code there should be multiple item divs and each item div has an h1 and cctrl div — xSketchy0, Nov 07 '17 at 17:18

jQuery selector for h1 contains and a button

2 Answers2