Dator
 |  Startsida |  Hårdvara |  Nätverk |  Programmering |  Programvara |  Felsökning |  System |   
Programmering
  • C /C + + -programmering
  • Computer Programspråk
  • Delphi Programmering
  • Java Programming
  • JavaScript programmering
  • PHP /MySQL Programmering
  • perl Programmering
  • python Programming
  • Ruby programmering
  • Visual Basics Programmering
  • * Dator Kunskap >> Programmering >> JavaScript programmering >> Content

    Hur man reda på hur många bilder i en DIV med Javascript

    JavaScript ger dig möjlighet att granska och även ändra HTML-koden på en webbsida efter att sidan har laddats på datorn och visas på skärmen . Du kan räkna antalet bilder inuti en
    tagg genom att koda taggen med ett " id " och sedan granska texten i taggen och räkna antalet taggar som finns i yttre
    taggen . Instruktioner
    1

    Skapa ett HMTL fil i en textredigerare eller i Anteckningar . Skapa en

    tag med en " id " -attribut och placera taggarna inuti
    taggen . ! Skriv till exempel

    < DOCTYPE html PUBLIC " - //W3C //DTD XHTML 1.0 Transitional //EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd " >




    Count Images < /title > <br> <p> < /head > <br> <p> <body> <br> <p> <div id="images"> < img src = " http://example.com/image1.jpg " alt = " image1 " /> <img src="http://example.com/image2.jpg" alt="image2" /> < img src = " http://example.com/image3.jpg " alt = " image3 " /> < /div > <br> <p> < /body> <br> <p> < /html > <br> 2 <p> Skapa en JavaScript -funktion och placera den mellan taggarna <head><meta name=viewport content="width=device-width, initial-scale=1.0"> . Få innehållet i <div> taggen och lagra den i en variabel . Till exempel , typ <br> <p> <script type="text/javascript"> <br> <p> funktion countImages () { <br> <p> var divContents = document.getElementById ( " bilder " ) . innerHTML ; <br> 3 <p> Använd ett reguljärt uttryck för att få arrayelementen som matchar öppnandet av <img> taggen . Till exempel , typ <br> <p> var- matcher = divContents.match ( /<img /) , <br> 4 <p> Få antalet bilder genom att referera antalet element i arrayen . Till exempel , typ <br> <p> var- numMatches = matches.length ; <br> <p> alert ( " Antal matcher är " + numMatches ) , <br> <p> } <br> <p> < /script > <br> 5 <p> anropa JavaScript-funktionen precis före den avslutande <body> att ge HTML- sidan tid att ladda . Till exempel , typ : <br> <p> <script type="text/javascript"> <br> <p> countImages (); <br> <p> < /script > <br> Addera <div class=dad2><script language='javascript' src='http://www.dator.xyz/ad/201310/4.js'></script></div> <div class=dad3><script language='javascript' src='http://www.dator.xyz/ad/201310/33.js'></script></div> </div> </td> </tr> </table> <table class=dhang1 bgcolor="#DEE7EE"> <tr> <td></td> </tr> </table> <div class=dhang7></div> <table width="92%" height="51" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="50%"><p>Tidigare: <a class='LinkPrevArticle' href='http://www.dator.xyz/Programmering/javascript-programming/91005.html' >Hur Extrahera parametrar från en webbadress med JavaScript </a></li></p></td> </tr> <tr> <td width="50%">nästa: <a class='LinkNextArticle' href='http://www.dator.xyz/Programmering/javascript-programming/91007.html' >Hur konvertera en int till en sträng med javascript </a></li></td> </tr> </table></td> </tr> </table> <div class=dhang7></div> <table class=s770x246 > <tr> <td class=s375x246 ><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"><table class=c1 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm"> relaterade artiklar </td> </tr> </table> <table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4"> <tr> <td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90939.html" title="Hur man installerar Facebook JavaScript SDK " target="_self">Hur man installerar Facebook JavaScript SDK </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90790.html" title="Vad är en AXD Arkiv " target="_self">Vad är en AXD Arkiv </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90925.html" title="Hur Override varje element i DIV " target="_self">Hur Override varje element i DIV </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91275.html" title="Hur man hittar ett primtal Använda Javascript " target="_self">Hur man hittar ett primtal Använda Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91286.html" title="Hur man gör en Dashboard-widget med Dashcode " target="_self">Hur man gör en Dashboard-widget med Dashcode </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90900.html" title="Hur man rensar elementattribut " target="_self">Hur man rensar elementattribut </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91153.html" title="Hur du använder Javascript Med Flash " target="_self">Hur du använder Javascript Med Flash </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90828.html" title="En handledning för HTML 5 Canvas Animation " target="_self">En handledning för HTML 5 Canvas Animation </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91229.html" title="Konvertera text till Java Script " target="_self">Konvertera text till Java Script </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90854.html" title="Hur man använder en ankarkod i JSP " target="_self">Hur man använder en ankarkod i JSP </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> <td width="20" valign="top"></td> <td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"> <table class=c3 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm">Utvalda artiklarna </td> </tr> </table> <table class=c4 > <tr> <td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/95211.html" title="Hur man skriver manus med Notepad " target="_self">Hur man skriver manus med Notepad </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/85860.html" title="Så här söker en länkad lista av element i C + + " target="_self">Så här söker en länkad lista av element i C + + </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/php-mysql-programming/92981.html" title="Hur gör jag säkerhetskopiera min MySQL databas i WAMPServer2 " target="_self">Hur gör jag säkerhetskopiera min MySQL databas i WAMP…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86633.html" title="Filtyper som kan användas med QBASIC " target="_self">Filtyper som kan användas med QBASIC </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/85260.html" title="Hur Redigera Silverlight Datagrid " target="_self">Hur Redigera Silverlight Datagrid </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/88411.html" title="Hur till Öppen JPG-filer Använda Microsoft Net Framework 2.0 " target="_self">Hur till Öppen JPG-filer Använda Microsoft Net Framew…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/86028.html" title="Vilka program Använd Visual C " target="_self">Vilka program Använd Visual C </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90920.html" title="Hur Drop Decimaler Använda JavaScript " target="_self">Hur Drop Decimaler Använda JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87350.html" title="Hur Kopiera en figur från MATLAB " target="_self">Hur Kopiera en figur från MATLAB </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/java-programming/89790.html" title="Java-projekt med kodning " target="_self">Java-projekt med kodning </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> <div class=dhang8></div> <div class=dhang1></div> <table class=b1> <tr> <td class=bs height=90 align=middle>Copyright © Dator Kunskap http://www.dator.xyz </td> </tr> </table> <div class=dhang1></div> </div> </body> </html>