get sibling that has id

Question

So I have the following structure:

<div id="some id">
     <div>
          <input id="some other id" ....>
          .....bunch of other inputs with no id field....
          <select onclick="findSiblingWithId()">             
     </div>
     <div>
          <input id="some other id" ....>
          .....bunch of other inputs with no id field....
          <select onclick="findSiblingWithId()">             
     </div>
     <div>
          <input id="some other id" ....>
          .....bunch of other inputs with no id field....
          <select onclick="findSiblingWithId()">             
     </div>

So in my findSiblingWithId i don't know the id I'm looking for, all I know is that for the other components in the same div, only one will have an id. How can I get that ?

Edit: Since it seems I didnt explain well enough I'll try to add more info. So I want for example when the select component changes (here it could be a button or anything, it doesnt matter) to get the corresponding <input id="some other id" ..> from the same div.

Like I tried to explain above, I have one huge div, the <div id="some id">, now this contains a number of smaller <div> without ids.

Each of these smaller divs will have ONE inputfield with an ID and a bunch of other without an ID. Now on an action, doesn't matter if a button click or whatever, from a component located IN THE SAME div (I thought the correct work would be 'sibling') is there a way I can find the input that has an ID attribute?

Regards, Bogdan

er ? what you want to get using this function ? and can you show code ? — SergeS, Aug 12 '11 at 14:06
Do you want to get the next input field, or the next div? Both would be possible with a loop through all the siblings, or even a simple indexOf search. — Some Guy, Aug 12 '11 at 14:09
Here is a post that has just about what you are looking to do... http://stackoverflow.com/questions/842336/is-there-a-way-to-select-sibling-nodes — El Guapo, Aug 12 '11 at 14:09

score 4 · Accepted Answer · answered Aug 12 '11 at 14:18

You could iterate over all children of the parent:

function findSiblingWithId(element) {
    var siblings = element.parentNode.children,
        sibWithId = null;
    for(var i = siblings.length; i--;) {
        if(siblings[i].id) {
            sibWithId = siblings[i];
            break;
        }
    }

    if(sibWithId) [
        // found it
    }
};

You have to pass the clicked element (I hope you have a proper select field);

<select onclick="findSiblingWithId(this)">

Consider to attach the event handler for the change event, if you want to have it triggered when the user selected a value.

Paul Barrié · Answer 2 · 2020-06-25T13:39:40.280

1

The most direct way to get the value that has this id among the siblings is to use the sibling's filter like this:

let my_id = ...
$(this).siblings(`div[id=${my_id}]`)

edited Jun 25 '20 at 13:39

answered Jun 24 '20 at 18:41

Paul Barrié

320
3
12

score 0 · Answer 3 · answered Aug 12 '11 at 14:10

0

Recursively iterate through the parent div and add logic to separate the inputs that have IDs

answered Aug 12 '11 at 14:10

James Johnson

45,496
8
73
110

score 0 · Answer 4 · answered Aug 12 '11 at 14:10

0

function findSiblingWithId(element) {
var sibling = null;

if (element.parentNode != null) {
    sibling = element.parentNode.nextSibling;
    // Then go through the child elements of your sibling node and get the one with an id
}

}

answered Aug 12 '11 at 14:10

Dorpsidioot

474
2
7

This will get the next sibling of the parent. – Felix Kling Aug 12 '11 at 14:31
Yes but after that he can go and find the input with the ID in it – Dorpsidioot Aug 13 '11 at 07:53

score 0 · Answer 5 · answered Aug 12 '11 at 14:10

0

Using jQuery:

<!--Modify HTML so input is -->
<select onclick="findSiblingWithId(this)">   

findSiblingWithId(elem){
    return $(elem).siblings("[id]"); //if you need all 
    //return $(elem).siblings("[id]:eq(0)"); //if you need only first
}

answered Aug 12 '11 at 14:10

J0HN

26,063
5
54
85

get sibling that has id

5 Answers5