Question

我有以下HTML代码：

<div id="div1">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="iwantthis"> </div>
</div>

父DIV的ID将始终相同，意味着#div1不会改变
动态生成子项DIV #iwantthis的ID

我需要获取该动态ID的值，因为它与给定的选择器绑定，所以我无法使用.find()方法。我已经搜索了这个并且出现了很多主题但是没有一个适合我的场景（或者至少我无法找到它）。

找到此类ID值的最佳方式是什么？

注意：除了帖子之外，请记住这一点：此刻我将有4个DIV 当前的一个持有动态ID，但这可能会改变时刻。

Answer 1

您可以将context的{{1}}设置为jQuery()，选择具有属性#div1或特定[id]

的子元素

id

Answer 2

如果您知道项目前有多少div，那么您可以使用以下选择器。

＆＃13;

var selector = "#div1>";

// loop 4 times, replace with how many div's before "wanted" div
// of course it can be a variable
for(var i = 0; i<4; i++) { 
    selector += "div+";
}

selector += "div";
console.log($(selector).attr("id"));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="iwantthis"> </div>
</div>

＆＃13;

Answer 3

您可以将子选择器关系与属性选择器

一起使用

＆＃13;

var $target = $('#div1 > div[id]'); //use the id attribute to select the target element
$target.addClass('selected');

//since the target is the last child you can use that relationship also

$('#div1 > div').last().html('Using last child');

＆＃13;

.selected {
  background-color: lightgreen;
}
#div1 div {
  border: 1px solid grey;
  padding: 5px;
  margin-bottom: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="iwantthis"></div>
</div>

＆＃13;

在jQuery中查找嵌套元素的ID

3 个答案: