使用javaScript访问父div中的元素？

Question

Hi I want to access all function just do in a div ! for Example :

<div class="ow_chat_dialog" id="main_tab_contact_11">
<iframe id="myframe"></iframe>
<button onclick="sersrc()"></button>
</div>

<div class="ow_chat_dialog" id="main_tab_contact_12">
<iframe id="myframe"></iframe>
<button onclick="sersrc()"></button>
</div>

<div class="ow_chat_dialog" id="main_tab_contact_13">
<iframe id="myframe"></iframe>
<button onclick="sersrc()"></button>
</div>
14
15
16
.
.
....
<script>
function setscr(){
document.findviewbyid("myframe").src="hrl..."
}
</script>

in this code i can create some div with one class name and id... But when i click on any button the first iframe change ! if i want just change the sibling iframe ! ** just use javaScript , Not Jquery .

Answer 1

Don't use ids, they must be unique. Use classes instead:

<div class="ow_chat_dialog" class="main_tab_contact_13">
    <iframe class="myframe"></iframe>
    <button onclick="sersrc(this)"></button>
</div>

Then let sersrc know which button was clicked by passing button reference. From there you can find sibling iframe like this for example:

function setscr(obj) {
    obj.parentNode.querySelector(".myframe").src = "hrl..."
}

If you are sure that iframe is going to be always immediately before the button then you can simply do

obj.previousElementSibling.src = "hrl..."

(course this is less reliable since depends on structure).

Answer 2

 var els = document.querySelectorAll('.ow_chat_dialog > button'); function handler () { this.previousElementSibling.src = "//stackoverflow.com"; } for (var i=0; i<els.length; ++i) els[i].addEventListener('click', handler); 

 <div class="ow_chat_dialog"> <iframe id="myframe"></iframe> <button></button> </div> <div class="ow_chat_dialog"> <iframe id="myframe"></iframe> <button></button> </div> <div class="ow_chat_dialog"> <iframe id="myframe"></iframe> <button></button> </div>