2016-11-04 24 views
1

でネストされた要素のID検索:私は、次のHTMLコードを持っているjQueryの

<div id="div1"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div id="iwantthis"> </div> 
</div> 
  • を親DIVのIDは常に#div1
  • IDを変更しないのと同じ意味になりますDIV #iwantthisが、私はそのダイナミックIDの値を取得する必要があり、それが関連付けられていますので、私は.find()メソッドを使用することはできません動的

生成された子どもたちの指定されたセレクタ私はこれを検索し、多くの話題が出てくるが、私のシナリオに合っていない(あるいは少なくとも私はそれを見つけることができなかった)。

このようなID値を見つけるにはどうすればよいですか?

注:ポストに加えて、これを覚えておく:現時点では私は、動的IDを保持 現在のものの前に4 DIVを持っていますが、これはどの 現時点で変更することができます。

答えて

3

あなたが項目の前にどのように多くのdivのを知っているならば、あなたは、セレクタ以下に使用できる選択子要素は、属性[id]または特定id

var div = $(" [id]", document.getElementById("div1")); 
var id = div.attr("id"); 
+0

'$( "[ID]"、$( "#のDIV1" )); 'もっと意味をなさない... – Dekel

+0

@Dekel' [id] 'の前に空白がありません。 「はるかに意味がある」とはどういう意味ですか? – guest271314

+0

@Dekelあなたのやり方がIDの代わりにObjectを返す – ReynierPM

0

を持つ、#div1jQuery()contextを設定することができます。

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"));
<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>

0

あなたは属性セレクタと子供セレクタの関係を使用することができます

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');
.selected { 
 
    background-color: lightgreen; 
 
} 
 
#div1 div { 
 
    border: 1px solid grey; 
 
    padding: 5px; 
 
    margin-bottom: 5px; 
 
}
<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>

関連する問題