run a javascript for each child element in a div

Question

run a javascript for each child element in a div

804 views Asked by Harald At 03 November 2024 at 03:04

I want ot make a new function function showdiv(toshow) "toshow" should have the name of the div to show "div1" or "div2" and then I want to get the inner divs inside the contentdiv and check, for each div, if the name is == toshow, run

$( document.getElementById($div).show( "fast" );

else if the id of div != toshow

$( document.getElementById(@div) ).hide( "fast");

how to write the function and the for look

Please write it in a basic and readable code.

 function showdiv(toshow) {
 }

<!-- begin snippet: js hide: false console: true babel: false -->

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hide demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<a href="#" onclick="showdiv('div1');">Klicka här för div1</a></br>
<a href="#" onclick="showdiv('div2');">Klicka här för div2</a>
<button id="div1show">show div1</button>
<button id="div2show">Show div2</button>
<div id="contentdiv" >
    <div id="div1" name="div1" class="inner" style="display:none;" background: "red">
      <span>Once</span> <span>upon</span> <span>a</span>
      <span>time</span> <span>there</span> <span>were</span>
      <span>three</span> <span>programmers...</span>
    </div>

    <div id="div2" name="div2" class="inner" style="display:none;" background: "blue">
         <div id="login"> 
             <button id="btn">btn</button>
        </div>
         <p>text ... text</p>
    </div>
</div>
<script>
  
function showdiv(toshow){
    $("#contentdiv div").hide("fast"); //Hide all divs
    $("#" + toshow).show("fast"); //Show one specific div
}    
    

$( "#div2show" ).click(function() {
  $( document.getElementById("div1") ).hide( "fast");
  $( document.getElementById("div2")).show( "fast" );
});

$( "#div1show" ).click(function() {
  $( document.getElementById("div2") ).hide( "fast");
  $( document.getElementById("div1")).show( "fast" );
});
</script>
 
</body>
</html>

 $("#div2show").click(function() {
   $(document.getElementById("div1")).hide("fast");
   $(document.getElementById("div2")).show("fast");
 });

 $("#div1show").click(function() {
   $(document.getElementById("div2")).hide("fast");
   $(document.getElementById("div1")).show("fast");
 });

<a href="#" onclick="$('.content').load('selectlandfromdb.php');">Klicka här</a>
<button id="div1show">show div1</button>
<button id="div2show">Show div2</button>
<div id="contentdiv">
  <div id="div1" class="inner" style="`enter code here`display:none;" background: "red">
    <span>Once</span>  <span>upon</span>  <span>a</span>
    <span>time</span>  <span>there</span>  <span>were</span>
    <span>three</span>  <span>programmers...</span>
  </div>

  <div id="div2" class="inner" style="display:none;" background: "blue">
    <p>text ... text</p>
  </div>
</div>

Original Q&A

There are 2 answers

**Mihai Cicu** · Answer 1 · 2017-01-05 12:00:55

Mihai Cicu On 05 January 2017 at 12:00

Considering you use jQuery, you can write something like this:

$("#contentdiv>div").each(function(e) {
    if ($(e).attr("name") == "toShow") $(e).show("fast");
    else $(e).hide("fast");
})

Note: Code is not tested

**Doozerman** · Answer 2 · 2017-01-05 11:53:43

It is quite hard to understand what you want to achieve, but I assume you want to be able to specify a name of the div, show this div, and hide all the others.

This could be done like that:

function showdiv(toshow){
    $("#contentdiv > div").hide("fast"); //Hide all divs
    $("#" + toshow).show("fast"); //Show one specific div
}

Then you can run the function like that:

showdiv("div1"); //Hides all divs, only shows the one with id 'div1'

Also, you don't need to write:

$(document.getElementById("div1"));

To get a jquery element by id, you just have to specify that you're picking the element by its id by writing # before the name. Do it like that:

$("#div1")

TechQA.

run a javascript for each child element in a div

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in FOREACH

Related Questions in GET-CHILDITEM

Popular Questions

Popular Tags

Trending Questions