How to select the right element if it has no id and class is not unique?

Question

I have a list of buttons. Need to select the only one button(third) from the list. So, once I click on a 'new button', it has to execute actions from button #3(ThirdButton). My problem is that <li> tags don`t have the id, so my iteration below is unsuccessful.

<div class="listButtons" id="anyId">
            <ul class="test">               
                <li>
                    <input value="Btn1" class="btn" name="Elem 1" title="Elem 1" type="button">
                </li>
                <li>
                    <input value="Btn2" class="btn" name="Elem 2" title="Elem 2" type"button">
                    <input value="Btn3" class="btn" name="Elem 3" title="Elem 3" type"button">
                    <input value="Btn4" class="btn" name="Elem 4" title="Elem 4" type"button">
                </li>
            </ul>
        <div>

I have tried: 1.

const newButton = $("#someId");     
const buttonsList = $("ul.test")
const thirdButton = buttonsList.find("input[name='Elem 3']")

newButton.click(() => {
   thirdButton.click()
})

2.

const newButton = $("#someId");     
const buttonsList = $("ul.test")
const thirdButton = buttonsList.find("input[name='Elem 3']")

$(function() {
   $("ul.test").find(".btn").each((index, elem) => {
          let elementValue = $(elem).attr("value")
          if(elementValue === "Btn3") {
          newButton.click(() => {
              $(elem).click()
             })
           }
         })

`$('#anyId :button').eq(#)` will select all buttons under the div with the anyId. Then you can plugin whatever number of the button you want. — Taplar, Jun 03 '19 at 15:23
Both your first (https://jsfiddle.net/zv8c5uhr/) and second (https://jsfiddle.net/zv8c5uhr/1/) examples work absolutely fine, although they are a little overcomplicated as you can simply use `eq()`, therefore I suspect there is an underlying problem here with your configuration. Check the console for errors — Rory McCrossan, Jun 03 '19 at 15:27
Possible duplicate of [How to get nth jQuery element](https://stackoverflow.com/questions/1442925/how-to-get-nth-jquery-element) — Heretic Monkey, Jun 03 '19 at 15:27
Here's an example of how to use `eq()` which I mentioned in my previous comment: https://jsfiddle.net/kdjtyhb4/ — Rory McCrossan, Jun 03 '19 at 15:33

Marius Danciu · Answer 1 · 2019-06-05T22:11:17.807

You can select the item by his name. In your case you have only one element with the same name so the index is 0.

<div class="listButtons" id="anyId">
  <ul class="test">               
    <li>
      <input value="Btn1" class="btn" name="Elem 1" title="Elem 1" type="button" onclick="alert(this.value)">
    </li>
    <li>
      <input value="Btn2" class="btn" name="Elem 2" title="Elem 2" type="button" onclick="alert(this.value)">
      <input value="Btn3" class="btn" name="Elem 3" title="Elem 3" type="button" onclick="alert(this.value)">
      <input value="Btn4" class="btn" name="Elem 4" title="Elem 4" type="button" onclick="alert(this.value)">
    </li>
  </ul>
<div>

<script>
  btn_to_click = document.getElementsByName("Elem 3");
  btn_to_click[0].click();
</script>

score 0 · Answer 2 · answered Jun 03 '19 at 15:56

0

As you are using Jquery you can do this:

$(".test").find("li").find("input[name='Elem 3']")

answered Jun 03 '19 at 15:56

Orfevre

1

score 0 · Answer 3 · edited Jun 03 '19 at 19:44

0

you can also get elements by tag name. I would start by getting the class or id of the parent element, then go through the children by tag names with a for loop.

document.getElementById('parent').getElementsByTagName('childrensTags')

then iterate over those till you find the control you want

edited Jun 03 '19 at 19:44

rene

41,474
78
114
152

answered Jun 03 '19 at 16:01

Max Alexander Hanna

3,388
1
25
35

How to select the right element if it has no id and class is not unique?

3 Answers3