繁体   English   中英

如何使用javascript计算div中锚标签的数量?

[英]How to count the number of anchor tags within a div using javascript?

我想知道如何计算div元素中存在的锚标签的数量。 例如:

<div>
<a href="1" >1</a>
<a href="2" >2</a>
<a href="3" >3</a>
<a href="4" >4</a>
</div>

有多少<a>标签?

theDivElement.getElementsByTagName('a').length

使用HTML DOM getElementsByTagName()获取对象下的所有“a”标记。
要获得div,最好给它一个ID,然后使用getElementsByTagName

 var anchors = document.getElementById("thediv").getElementsByTagName("a"); alert("The Div has " + anchors.length + " links in it"); 
 <div id="thediv"> <a href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> </div> 

计算相同的数量<div>在 html 使用 javascript</div><div id="text_translate"><p> 所以我是 JS 的新手,我必须检查用户必须让他添加多少文档,我可以用 PHP 来做,但我想学习一些 Javascript 这样我做了什么,以及我什么时候存储它说它未定义的父变量的长度,有人可以告诉发生了什么事并感谢您的帮助。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> window.alert = function(titre, message) { document.getElementById("alertPanel").innerHTML = "<span class=\"close\" onclick=\"closealert();\"></span><h2>" + titre + "</h2><div class=\"texte\">" + message + "</div>"; document.getElementById('alertPanel').style.display='block'; document.getElementById('overlay').style.display='block'; } function HowMuchDocuments() { console.log("work"); var parent = document.getElementsByClassName("created-item"); var itemCount= parent.length; console.log(parent); console.log(itemCount); if(itemCount == 4 ) { console.log('work fine'); alert('Maximum Documents Reached','Please Delete Some Documents you cant go more then 5 documents'); } else { console.log('redirect fine'); console.log(parent.length); //window.location.href="mypage.php"; } } function closealert() { document.getElementById('alertPanel').style.display='none'; document.getElementById('overlay').style.display='none'; }</pre><pre class="snippet-code-css lang-css prettyprint-override"> alert #overlay{ position:fixed; z-index:999; top:0px; left:0px; width:100%; height:100%; background-color:#000; opacity:0.7; display: none; } alert #alertPanel{ position:absolute; top:25%; min-height: 170px; width: 450px; margin-left: 24%; z-index:9999; color:#000; border:1px solid #303030; background-color:#eaeaea; display: none; text-align: center; font-size: 24px; font-weight:100%; margin-bottom: 20px; } alert div.texte{ width: 400px; display:inline-block; padding:20px 0px 10px 0px; word-wrap: break-word; } alert span.close{ background: url('data:image/png;base64,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') no-repeat center center; cursor:pointer; height:32px; width:32px; position:absolute; right:12px; top:12px; cursor:pointer; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; opacity:1.0; } alert #alertPanel h2{ font-weight:100%; font-size:22px; padding:25px 0px 15px 15px; text-align:center; text-shadow:1px 1px 1px #000; margin:0px; background-color: #323232; border:2px solid #fff; -moz-box-shadow:0px 0px 8px #000; -webkit-box-shadow:0px 0px 8px #000; box-shadow:0px 0px 8px #000; color: #FFFFFF; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> <alert> <div id="overlay" ></div> <div id="alertPanel" ></div> </alert> <div> <button class="" id="addDoc" onclick="HowMuchDocuments();"> Add Document </button> </div> <div class="created-item">yow</div> <div class="created-item">yow</div> <div class="created-item">yow</div> <div class="created-item">yow</div></pre></div></div><p></p></div>

[英]Count number of same <div> in html using javascript

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在Javascript中动态地将锚标记添加到div? 如何使用javascript计算另一个div内的div总数 如何计算另一个div中的div数量 如何在PHP代码中使用Javascript在没有href的锚点onclick上显示隐藏的div? 如何在具有相同类名的div标签中循环遍历锚标签 计算相同的数量<div>在 html 使用 javascript</div><div id="text_translate"><p> 所以我是 JS 的新手,我必须检查用户必须让他添加多少文档,我可以用 PHP 来做,但我想学习一些 Javascript 这样我做了什么,以及我什么时候存储它说它未定义的父变量的长度,有人可以告诉发生了什么事并感谢您的帮助。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> window.alert = function(titre, message) { document.getElementById("alertPanel").innerHTML = "<span class=\"close\" onclick=\"closealert();\"></span><h2>" + titre + "</h2><div class=\"texte\">" + message + "</div>"; document.getElementById('alertPanel').style.display='block'; document.getElementById('overlay').style.display='block'; } function HowMuchDocuments() { console.log("work"); var parent = document.getElementsByClassName("created-item"); var itemCount= parent.length; console.log(parent); console.log(itemCount); if(itemCount == 4 ) { console.log('work fine'); alert('Maximum Documents Reached','Please Delete Some Documents you cant go more then 5 documents'); } else { console.log('redirect fine'); console.log(parent.length); //window.location.href="mypage.php"; } } function closealert() { document.getElementById('alertPanel').style.display='none'; document.getElementById('overlay').style.display='none'; }</pre><pre class="snippet-code-css lang-css prettyprint-override"> alert #overlay{ position:fixed; z-index:999; top:0px; left:0px; width:100%; height:100%; background-color:#000; opacity:0.7; display: none; } alert #alertPanel{ position:absolute; top:25%; min-height: 170px; width: 450px; margin-left: 24%; z-index:9999; color:#000; border:1px solid #303030; background-color:#eaeaea; display: none; text-align: center; font-size: 24px; font-weight:100%; margin-bottom: 20px; } alert div.texte{ width: 400px; display:inline-block; padding:20px 0px 10px 0px; word-wrap: break-word; } alert span.close{ background: url('data:image/png;base64,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') no-repeat center center; cursor:pointer; height:32px; width:32px; position:absolute; right:12px; top:12px; cursor:pointer; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; opacity:1.0; } alert #alertPanel h2{ font-weight:100%; font-size:22px; padding:25px 0px 15px 15px; text-align:center; text-shadow:1px 1px 1px #000; margin:0px; background-color: #323232; border:2px solid #fff; -moz-box-shadow:0px 0px 8px #000; -webkit-box-shadow:0px 0px 8px #000; box-shadow:0px 0px 8px #000; color: #FFFFFF; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> <alert> <div id="overlay" ></div> <div id="alertPanel" ></div> </alert> <div> <button class="" id="addDoc" onclick="HowMuchDocuments();"> Add Document </button> </div> <div class="created-item">yow</div> <div class="created-item">yow</div> <div class="created-item">yow</div> <div class="created-item">yow</div></pre></div></div><p></p></div> 如何使用javascript计算DIV中的字符数 如何在 Javascript 中使用 RegEx 获取锚标签中未包含的所有字符? 如何使用Javascript和Anchor标签调整用户视图 打印多个 <p> 内的标签 <div> 使用JavaScript
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM