Question

所以我有以下结构：

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

所以在我的findSiblingWithId中，我不知道我正在寻找的id，我所知道的是，对于同一div中的其他组件，只有一个会有id。我怎么能得到它？

编辑：由于我似乎没有解释得足够好，我会尝试添加更多信息。所以我希望例如当select组件发生变化时（这里可能是一个按钮或任何东西，无关紧要）从相同的div中获取相应的<input id="some other id" ..>。

就像我上面尝试解释的那样，我有一个巨大的div <div id="some id">，现在它包含了一些没有id的小<div>。

这些较小的div中的每一个都有一个带有ID的输入字段和一堆没有ID的其他字段。现在进行一个动作，无论是按钮点击还是其他什么，来自位于同一div的组件（我认为正确的工作将是'兄弟姐妹'）是否有一种方法可以找到具有ID属性的输入？

此致波格丹

Answer 1

你可以迭代父母的所有孩子：

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

你必须传递点击的元素（我希望你有一个合适的select字段）;

<select onclick="findSiblingWithId(this)">

如果您希望在用户选择值时触发事件处理程序，请考虑附加change事件的事件处理程序。

Answer 2

递归遍历父div并添加逻辑以分隔具有ID

的输入

Answer 3

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
}

}

Answer 4

使用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
}

Answer 5

在兄弟姐妹之间获取具有此id的值的最直接方法是使用兄弟姐妹的过滤器，如下所示：

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

得到有id的兄弟姐妹

5 个答案: