How acces to nearest element with an ID in javaScript ?

Question

4.00/5 (1 vote)

See more:

Hi i have div that reapited ! all div are one ! Example :

HTML

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

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

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

But wen i click on button change the first iframe element !!!
plz help me i need help :((

Posted 5-Dec-14 22:57pm

‫محم د‬‎

Add a Solution

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Afzaal Ahmad Zeeshan · Answer 1 · 2014-12-05T23:09:00

First things first, you HTML is illegal. Because there is only one ID allowed with a specified identifier string. Yours has 3 of them. Change the HTML to this one,

HTML

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

This is why you use class to group elements of same type. The problem that it selected the first, was because it started looking for any element with an ID of myframe, and the first one it found was applied with the source of resource.

Secondly, to get the nearest, or the iframe inside the same parent you can use any of the following methods, do use jQuery to make things a little simple.

Finding from the same parent

JavaScript

$(document).ready(function () {
   $('button').click(function () {
      // remove the event hanlder from the HTML markup
      // handle it here..
      $(this).parent().find('iframe').attr('src', "http://www.locationofresource.com/page.html";
   });
});

This code, would find the iframe inside the same parent where the button is present and will update the source of it.

mudgilsks · Answer 2 · 2014-12-05T23:23:00

hi,

As i understand

try this

To get a div by class name:

get Div by Class name

var allDivs = document.getElementsByClassName("ow_chat_dialog");
Assuming there's only one

var calendarDiv = document.getElementsByClassName("ow_chat_dialog")[0];
Get the iFrame inside:

var iFrame = calendarDiv.getElementsByTagName("myframe")[0];

Use Like this in your fn

function setscr(){
var calendarDiv = document.getElementsByClassName("ow_chat_dialog")[0];
Get the iFrame inside:

var iFrame = calendarDiv.getElementsByTagName("myframe")[0];
document.findviewbyid("iFrame ").src="hrl..."
iFrame ..src="hrl..."
}

/\jmot · Answer 3 · 2014-12-05T23:26:00

Solution 3

see these links..
http://www.w3schools.com/jquery/traversing_closest.asp[^]
http://stackoverflow.com/questions/18663941/finding-closest-element-without-jquery[^]
http://stackoverflow.com/questions/22100853/dom-pure-javascript-solution-to-jquery-closest-implementation[^]

Posted 5-Dec-14 23:26pm

/\jmot

Kan07 · Answer 4 · 2014-12-05T23:48:00

Solution 4

va Input = $(this).closest('.row').find('.inputQty');

$(document).ready(function(){
$("span").closest("ul").css({"color":"red","border":"2px solid red"});
});

Posted 5-Dec-14 23:48pm

Kan07

Comments

‫محم د‬‎ 6-Dec-14 6:14am

i neeeeeed javaScript Not jQuery !

How acces to nearest element with an ID in javaScript ?

4 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Add your solution here

Preview 0