计算特定类的DIVs，其中类名是一个变量
。
答案： 在前端开发中，我们经常需要根据特定的条件或变量来计算或操作特定的DOM元素。针对计算特定类的DIVs，可以通过以下步骤实现：
- 获取所有DIV元素： 首先，使用相应的DOM选择器（如querySelectorAll）获取页面中的所有DIV元素，以便后续筛选。
- 筛选具有特定类的DIVs： 通过遍历获取到的DIV元素集合，对每个DIV元素进行判断，检查其类名是否包含特定的类名变量。如果是，则将该DIV元素添加到一个新的数组或集合中，以便后续操作。
- 执行所需的计算或操作： 对于筛选出的特定类的DIVs，你可以根据具体需求进行相应的计算或操作。例如，可以修改其样式、添加事件监听器、动态改变内容等等。
下面是一个示例代码片段，演示了如何使用JavaScript和HTML来实现计算特定类的DIVs：
<!DOCTYPE html>
<html>
<head>
<title>计算特定类的DIVs示例</title>
</head>
<body>
<div class="my-div">DIV 1</div>
<div class="my-div">DIV 2</div>
<div class="other-div">DIV 3</div>
<div class="my-div">DIV 4</div>
<script>
// 获取所有DIV元素
var divs = document.querySelectorAll("div");
// 定义特定类名的变量
var targetClassName = "my-div";
// 筛选具有特定类的DIVs
var targetDivs = [];
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div.classList.contains(targetClassName)) {
targetDivs.push(div);
}
}
// 执行所需的计算或操作
targetDivs.forEach(function(div) {
// 在此处进行你的计算或操作
console.log(div.textContent);
});
</script>
</body>
</html>上述示例代码中，我们获取了页面中所有的DIV元素，然后根据特定类名变量"my-div"筛选出具有该类名的DIVs，并在控制台输出它们的文本内容。
对于该需求，腾讯云没有直接相关的产品或服务。然而，腾讯云提供了丰富的云计算基础设施和解决方案，例如弹性计算、容器服务、服务器less等，可用于支持前端开发、后端开发、网络通信、网络安全等各个方面的需求。你可以访问腾讯云官网（https://cloud.tencent.com/）了解更多相关产品和服务的详细信息。
相关·内容
2回答
我已经尝试了这个页面上的解决方案来计算父(类) div中的div。但不幸的是，我的结果总是显示现有的子div的总数。在示例之后，两个span标记都将输出7。
为了更好地理解，这是代码html:缺少什么？-(我绝对是新手)。thnx。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>count&
浏览 1提问于2011-08-23得票数 1
如何将类添加到具有相同class的2个div中
在中，我有3个div，其中2个共享class ".matched“。
如何将JS中的另一个类(例如.sameclass)添加到这2个div中？
非常感谢！
<div class="container">
<div class="box1 matched"></div>
<div class="box2 matched"></div>
<div class="box3"></div>
浏览 24提问于2022-01-12得票数 0
2回答
我有同一个名字的多个单选按钮。其中一个在它旁边有个隐藏的div。
当选择正确的单选按钮时，我希望显示/隐藏它旁边的div“如果一个在那里”。
下面是一个例子
电台1电台2电台3电台4台
无线电2旁边有一个隐藏的div。我想在选择第二台的时候给你看。然后，当选择广播4时，我想隐藏无线电2 div。
以下是我所做的
$(function(){
function getGroupElement(value)
{
return '#group_' + value.replace(':', '_');
}
浏览 2提问于2015-11-18得票数 0
回答已采纳
我试图得到点击元素的索引。到目前为止这还不错。
问题是您可以使用hide元素。如果一个元素是隐藏的，我不希望它在索引中被“计数”。
如果你看一下小提琴，所有的盒子都是橙色的，指数就是应该的。如果你点击Click me to hide some divs --他们不会被移除，实际上他们在这里得到一个display:none; --他们只是得到另一种颜色来给你一个想法--他们也得到了类hidden，所以现在我不想让索引对它们进行索引。但是，如果我单击1，我希望索引显示Div 2
我试过用$('div').not('hidden')小提琴在这里->
<s
浏览 6提问于2014-09-22得票数 3
回答已采纳
我想获取所有以id 'div‘开头的div。为此，我使用了@ViewChildren，但我无法访问div，因为我有一个空数组，为什么？
我的模板
<div id="div-1">Div 1</div>
<div id="div-2">Div 2</div>
<input type="button" (click)="getDivs()">
组件
@ViewChildren('div') divs: QueryList<any>;
div
浏览 3提问于2018-10-27得票数 20
回答已采纳
因此，我有一个包含多个列表div的索引页。每个address.id%>都有一个动态创建的id，在本例中是edit_<%= div。我正在尝试编写一些jquery，以便当我将鼠标悬停在单个div上时，会显示一些隐藏的链接，或者当我单击此列表的编辑链接时，会弹出一个表单。我可以像这样内联完成：
onclick="$('#edit_<%= address.id %>').dialog();"
但在我的application.js文件中如下所示：
$(document).ready(function() {
$('#edit_<%=
浏览 0提问于2013-04-10得票数 2
回答已采纳
2回答
循环通过DIVS /元素
、、、
快速解释：
我的代码是这样的：
<div class="table">
- div class 1 (in these divs 1-4 -> there a nested divs for Name / Score / ...)
- div class 2
- div class 3
- div class 4
- ...
</div>
我用JavaScript更改值：
document.getElementById('1').textContent=data.user[0].Score + "M";
浏览 3提问于2022-05-07得票数 -1
我有一个DIV，可以滑动到内容的高度，但由于某些原因，在没有内容的DIV上，它计算高度是错误的。
第二个博客条目(Thoma)在扩展时是一个很好的例子。
“data- height”是108px，但它将DIV的高度设置为360px。有内容的DIVs工作得很好，它设置了正确的高度，但在没有内容的DIVs上似乎计算错了。
这基本上就是代码的摘要。
将高度设置为div上的值。
$(".articleSlide").each(function () {
var current = $(this);
current.attr("data-height",
浏览 2提问于2011-05-17得票数 0
回答已采纳
1回答
我是个新手程序员，请原谅。我必须从主窗口打开一堆弹出窗口，以获取一些数据。但是，没有一个链接，只有许多div具有相同的类名，当单击时打开弹出窗口。我该怎么用watir来做呢？谢谢。
浏览 4提问于2022-06-10得票数 0
2回答
我有一个插件系统设置，将(在编译时)搜索插件目录中的所有插件。
我的问题是，我正在尝试允许flycheck将这些插件的头添加到包含路径中。
我有一个问题，我不知道如何使这个表达式真正地评估它的价值。(表达式被视为值而不是计算值)
((c++-mode . ((flycheck-clang-include-path . (split-string (substring
(shell-command-to-string
浏览 4提问于2015-10-31得票数 2
2回答
我只是想把我的工作安排如下：
创建非常基本的CSS类，例如：
.backgroundRed {
background-color:red;
}
.backgroundGreen {
background-color:green;
}
.fixed300 {
width:300px;
}
.percent100 {
width: 100%;
}
.centered {
margin: auto;
}
.centeredTextHorizontally {
text-align:center;
}
.colorWhite {
浏览 3提问于2014-03-16得票数 2
回答已采纳
我有一些具有相同Id和相同Class的div，如下所示：
<div id="results_information" class="control_results">
<!-- I have divs, subDivs, span, images inside -->
</div>
<div id="results_information" class="control_results">
<!-- I have divs, subDivs, span, images ins
浏览 0提问于2016-10-26得票数 0
回答已采纳
5回答
我正在尝试获取页面上所有div宽度的总和，并在单击时显示它。
我面临的问题是，当我再次单击该按钮以显示结果返回双倍的和时，如果我再次第三次单击，结果返回三倍，等等
我在jsfiddle 中的代码
HTML
<button>Size of all divs?</button><br>
<div style="width: 100px;">REMOVE</div>
<div style="width: 150px;">REMOVE</div>
<div style="w
浏览 5提问于2013-10-17得票数 2
回答已采纳
1回答
我们有一个web应用程序为我们的计算机支持小组管理库存。我们将使用它的目的之一是为我们更大的计算机实验室驱动一个“当前正在使用的计算机”映射，这样用户就可以更容易地找到一台开放的计算机(我们主库中的实验室大约有150台计算机)。用作此页面显示背景的图像通过应用程序的管理部分进行管理，实验室中的工作站及其位置之间的关系也是如此。
我们想让管理员可以在管理界面中更新地图时“关闭”每个位置的地图页面的显示。我的想法是扩展保存位置数据的表，以指示该位置是否可用于地图显示，并在地图更新时进行检查。如果检查指示不应显示地图，则页面将绘制一条合适的消息，而不是显示地图图像和“正在使用”的覆盖数据。
我希望其
浏览 0提问于2008-10-21得票数 1
回答已采纳
2回答
我们都知道，给定对象的弹性布局"em“值是相对于对象的父对象的，例如：
<div id="div1" style="font-size:1em;">
<p>Hello</p>
<div id="div2" style="font-size:0.5em;">
<p>Hello</p>
<div id="div3" style="font-size:0.5em;">
<p>Hello</p>
浏览 6提问于2010-11-29得票数 4
回答已采纳
1回答
我有很多页面，其中的结构如下：
<table class='CERTAIN_CLASS'> ... </table>
A lot of stuff here (divs, ps, brs, images)
<table class='CERTAIN_CLASS'> ... </table>
提取文本最有效的方法是什么(仅文本！)某一类的两张桌子之间的所有东西？我在这个问题上发现了很多类似的问题，但在这个特别的任务上却没有发现。
浏览 1提问于2020-11-29得票数 0
我有这样的代码：
<form action="#" method="get">
<fieldset>
<div>
<label for="profilephoto">Your profile photo</label>
<input type="file" name="profilephoto" id="profilephot
浏览 2提问于2012-12-20得票数 0
4回答
我不知道这是不是可能。
我有一个动态表单，其中的内容是动态创建的。每次单击按钮时，都会添加一个新的div元素。我想要做的是使前面的div不可编辑，即不能使用输入字段，不能单击按钮。
这是可行的吗？
谢谢。
浏览 1提问于2012-09-19得票数 0
回答已采纳
1回答
我想在div中显示findMax()输出，但我面临这个问题：
“findMax”未定义为no-undef，“数据集”未定义为no-undef。
有人建议我需要使用useState，但我不知道如何使它工作，我会感谢任何帮助！
const pricedata = {
datasets: [
{
backgroundColor: "#0000",
barPercentage: 2,
barThickness: 5,
data: [1, 10, 30, 7, 42, 12],
label: "Update
浏览 1提问于2022-01-05得票数 0
4回答
为什么我的变量似乎在更新？
、、、、
我目前正在学习JavaScript，据我所知，我还没有学到任何可以解释以下内容的东西：
<div id="parent">
<div>One</div>
<div>Two</div>
</div>
<script>
function test(node) {
var divs = node.children;
console.log(divs);
var div = document.createElement("d
浏览 0提问于2016-12-02得票数 0
我有一个DIVS (店面上的产品)的列表，这个列表的宽度是类“主席DIVS”。我希望能够过滤具有附加类的DIVS，下面是一个示例：
<div class="chairdiv sold"></div>
<div class="chairdiv forsale"></div>
<div class="chairdiv forsale"></div>
<div class="chairdiv forsale"></div>
<div c
浏览 0提问于2012-06-26得票数 0
回答已采纳
1回答
使用类名解析curl结果
、、、
我是使用卷曲功能，从另一边获得，但它显示的网站完整的网页。我想显示基于类名的内容。请让我知道我怎么做的？我使用的代码如下：
<?php
$curl = curl_init('http://www.insolvency.govt.nz/cms/search?SearchableText=smith');
curl_setopt($curl, CURLOPT_FAILONERROR, true);
curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($curl, CURLOPT_RETURNTR
浏览 1提问于2013-08-02得票数 2
回答已采纳
知识：第一周Javascript
我正在努力学习真正的javascript，并不惜一切代价避免jquery。现在，我最近学到，id's可以很容易地成为风格，而不是类。为了给类样式设置样式，我需要循环遍历该类的dom。我的原始代码工作，但我的新代码不起作用。暂且撇开最佳实践不说，我正试着学习它是如何工作的，不管它是否是一个完美的解决方案。
问题说明：在我的新代码中，我将两个get函数存储在关联数组中的键中。因此，我有对象，我想让我的for循环来理解。我试着让它像我的第一段代码一样工作。
我尝试了什么：老实说，我读过一些关于方括号表示法的文章，以及它是如何有用的。说实话，我觉得有点不知所措
浏览 2提问于2015-09-10得票数 0
回答已采纳
我已经创建了一个扩展的div，它在加载时隐藏，在使用javascript和jQuery单击时扩展。我的问题是，我需要在每个页面上多次使用此功能(10-30x)。有没有办法调用函数来使用数组或类似性质的东西来处理多个Div Is (抱歉，我是个新手)，例如，我的一些div Is可能是eb1，eb2，eb3，eb4。下面是我的脚本，它当前在一个id上工作：
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#eb1
浏览 0提问于2012-09-19得票数 2
3回答
如何在单击“下一步”和“上一步”按钮时同时为列表li标记添加类。
在单击next和prev时，活动类应同时为li添加和删除。
任何人都能解决这个问题。
提前感谢:)
$(document).ready(function() {
$(".divs div").each(function(e) {
if (e != 0)
$(this).hide();
});
$("#next").click(function() {
$(".list li").addClass("active");
浏览 3提问于2017-08-16得票数 2
回答已采纳
2回答
我关心的是从页面中选择多个元素。最好是按类使用选择器，还是按id使用多次调用选择器？
我选择的元素的数量，或垃圾元素，我没有选择，但选择器必须检查它们是每次不同的。
(对不起我的英语)
浏览 4提问于2013-09-13得票数 0
回答已采纳
4回答
我有一个HTML页面，其中有一些隐藏的DIVs和这些DIVs是可见的一个页面的vai视图源代码。当用户“查看页面的源代码”时，这些DIVs不应该对用户可见。
如何做到这一点？也许是Javascript或其他解决方案？
浏览 0提问于2014-03-07得票数 0
2回答
我想获得一个变量的类类型，并将其用作Matlab中的函数。
例如，假设x属于uint8类。我可以通过classtype=class(x)获取这些信息。
我想要的是在不同的变量上自动使用它，例如：
y=classstype(y)
例如，其中y的类型为logical。
我如何才能做到这一点？
浏览 3提问于2013-04-20得票数 1
回答已采纳
我正在创建一个rolodex类型的动画，我使用计时器为3d动画设置一个类，并动态地设置z索引，以便元素在需要时相互覆盖和相互衬垫。每隔一秒，我就会期望底部广度(divs.children[1])设置类和样式属性，然后在那一秒之间，我希望底部移除属性，上半部分(divs.children[0])开始动画。
当我使用下面的代码时，每次对hideTop()、showTop()和showBottom()的调用都会像预期的那样工作，但是每当调用hideBottom()时，样式或类属性都不会被删除。我也尝试过使用setAttribute("style", "")，但没有结果
浏览 3提问于2014-12-05得票数 0
回答已采纳
如这把小提琴所示，
当您从选择框中选择一个选项时，页面上的所有div都会被删除，并且只显示从选中框中选择的div id。
假设我有多个div，我希望始终保持在页面(内容)上，只希望筛选显示或将选定的div隐藏在选中框中(取决于所选的是哪一个)。
我不清楚应该如何调整代码以实现这一点？
我想，某种形式的排除需要在下面添加？
$(function() {
$('select').change(function() {
var val = $(this).val();
if (val) {
$('div:not(
浏览 3提问于2015-06-27得票数 0
回答已采纳
你好，我试图在键按下计算一行中的多个字段的总数(我的代码将包含多个行)(其中一些使用加法，有些使用减法)，但由于我是新手，我对JQuery并不太熟悉。在我的场景中，B.Salary，Rec.comm，Sal.comm将添加到总字段和前进中，演绎字段将从总字段中减去，调整字段将使用加法(如果包含正值则使用减法)，如果包含负值则使用减法。我尽了最大的努力想出一些相关的方案，但没有成功。
这里是我的
<div class="col-md-12">
<div ng-controller="customersCrtl">
<!-- A
浏览 2提问于2017-04-30得票数 0
回答已采纳
当拇指被点击时，我正在尝试加载图像。用户点击：
<li><a href="#" class="01"><img src="images/thumbimg1.jpg" alt="thumbnail 1" /></a></li>
我使用的jQuery是：
var divs = $('#img01, #img02, #img03, #img04, #img05, #img06, #img07, #img08, #img09, #img10');
var clas
浏览 0提问于2013-03-03得票数 0
回答已采纳
我正在使用顺风、CSS、和classNames包。
我正在呈现两个div，我想检查其中一个是否有am active类，然后为它设置一个特定的背景颜色className bg-[#000]。
我试过使用'bg-[#000]': 'active'检查，但这只是在所有元素上插入背景色。
如何使用Tailwind和classNames将特定的样式设置为活动元素
谢谢!
Screenshots:
这是标签的屏幕截图，第一个是当前活动的。但是第二个不活动的类也有bg-[#000]类。
代码：
list.map((page, index) => {
ret
浏览 6提问于2022-07-01得票数 1
回答已采纳
2回答
我想点击一个按钮，将div添加到id容器中，如果是奇数或偶数，则使用不同的颜色背景。这是我写的代码。我尝试在for循环中使用带有模数的if语句。nextDiv e Nextdiv2有两种不同的背景。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0&
浏览 0提问于2020-04-28得票数 0
我是javaScript的新手，我试图通过运行一个函数来隐藏多个div。test8是存在的，它们被称为test1直到div。每次我激活该函数时，它都会给出错误document.getElementsByClassName(...).style is undefined 以下是我的代码 var divs = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"];
for (va
浏览 28提问于2019-02-27得票数 0
回答已采纳
有没有办法在FlashBuilder的变量/表达式窗口中显示类名以外的其他东西？
浏览 2提问于2014-02-13得票数 0
8回答
我有一个HTML结构，它是这样的：
<div class="className"></div>
<div class="className"></div>
...
<div class="className"></div>
我试图用jQuery来选择这些元素。为此，我想知道是否有可能在循环中将这些项作为目标，其中N是divs的数量。在第一个循环中，我想针对第一个div，在第二个循环，第二个div，等等.
for (var i = 0; i < N; i++) {
浏览 5提问于2014-10-10得票数 0
回答已采纳
在我的程序中，我有3个分类，分别是“信息”、“兴趣”和“墙”。我希望这个部门改变他们的颜色时，一个用户点击它。最初，所有3个分区类都有相同的颜色#dcdcdc。当用户点击其中之一，我想改变它的颜色为#999，但其他部门的颜色必须保持#dcdcdc。
这个部分工作正常，但当我点击第二部分时，前一个部分的颜色并没有变回#dcdcdc。
JavaScript部件。
$(document).ready(function(){
$('#pro_head > div').click
(
function()
{
$(this).css("backgroun
浏览 3提问于2012-02-20得票数 2
回答已采纳
我有一个纸张宽度，不同的DIVs和打印链接。我希望，如果用户单击打印链接，应该打印特定的DIV，而不是整个页面。
浏览 0提问于2010-10-19得票数 0
回答已采纳
3回答
我一直在尝试使用for循环将click事件添加到一系列divs中。divs是动态创建和加载的。每个div都应该调用自己的回调函数。但似乎每个div都附加到最终的事件侦听器，并调用最终事件侦听器的回调函数。
下面是我的基本代码：
for(index=0; index<divs.length; index++) {
divs[index].addEventListener("click", function(){console.log(divs[index].getAttribute("id"));}, true); //capture click eve
浏览 0提问于2012-01-16得票数 1
回答已采纳
5回答
第一次在这里发帖。我是jquery的初学者，我遇到了一些灰色地带。希望我能在这里找到我的答案，并从中学到:)
所以我有一个10种不同的div。所有的人都有相同的课程。每次单击div时，它都必须添加另一个类(在本例中是css中的背景颜色)。为此，我要说的是：
$(document).ready(function() {
$(".menucardmenu").click(function(){
if($(this).hasClass("menucardmenu")) {
$(this).addClass("bac
浏览 1提问于2011-06-11得票数 3
回答已采纳
是否可以通过向下滚动到HTML末尾的方式按类名计算div的数量？我有一个页面要抓取，但我每次都需要向下滚动才能计算“隐藏”div的数量，这是在我向下滚动页面后出现的。 我有以下document.getElementsByClassName('Class_Name').length，但它要求我每次在页面上向下滚动。我想在浏览器控制台上做这件事。这个是可能的吗？
浏览 15提问于2020-12-08得票数 0
网站上的父类包含多个其他类，这些类的名称和xpath更改，而父类保持不变。我想遍历所有的子类，并获得每个子类所具有的src链接。下面是一个突出显示父类的映像，其中子类显示src链接：
浏览 1提问于2021-06-29得票数 0
回答已采纳
基本上，我喜欢向具有相同类名的多个元素中添加一个新类。目前，它只向最后一个类添加了一个类。我试过使用document.querySelectorAll，但没有得到任何结果。我错过了什么？
HTML示例
<div class="model"></div>
<div class="model"></div>
<div class="model"></div>
JS
_updateParagraph: function(settings, className) {
var
浏览 6提问于2015-09-15得票数 12
1回答
我需要帮助使用动态填充的类名过滤大量填充的div。
这是一个表单，当选中的选项需要隐藏没有indexOf的所有div时，即div的类名。
<p>To narrow down the results, fill out the form below.</p>
<!-- FORM -->
<strong>Student/Teacher</strong>
<select name="classification" id="classification">
浏览 3提问于2014-02-25得票数 0
回答已采纳
3回答
我在获取下面的county列表以填充我的循环结果时遇到了问题。当我打印出每次迭代的结果以及列表中项目的索引时，我看到每次都会得到索引0，这表明数据在每次循环后都不会持久保存在列表中。因此，当我在循环完成后尝试索引county循环时，当然其中根本没有数据，所以我得到了“列表索引超出范围错误”。
我研究了我一直得到的"list index out of range“错误，我知道我得到它是因为county列表是空的，但是为什么它是空的呢？
组成target_divs列表中一个条目的HTML源代码如下所示：
<div class="school-type-list-text
浏览 7提问于2017-06-20得票数 0
如何从视图本身访问由ember.js视图插入的DOM元素的属性。下面是一个简短的示例。假设我有以下cat.handlebars模板：
{{#collection contentBinding="App.catsController"}}
<div class="cat" {{bindAttr id="view.content.id"}}></div>
{{/collection}}
它在此视图中使用：
App.CatView = Ember.View.extend({
templateName: 'cat&
浏览 0提问于2012-09-20得票数 4
我正在尝试使用两个图像作为我的教程脚本的播放和暂停按钮。如何将JavaScript中的"Start“和"Stop”替换为两个图像？
这是我的JavaScript：
$(document).ready(function(){
fadeLoop()
function fadeLoop() {
var counter = 0,
divs = $('.fader').css('visibility','visible').hide(),
dur = 100;
function showD
浏览 3提问于2013-02-06得票数 0
场景:我有一个包含多个DIVs的页面。一些DIVs应该在第一个页面加载时被隐藏。我使用了Jquery hide()函数来隐藏DIVs。
问题:由于某些原因，jquery隐藏函数似乎只能部分工作，即需要完全隐藏的DIV会显示一秒钟，然后隐藏起来。
有什么办法可以解决这个问题吗？
浏览 1提问于2012-07-17得票数 2
回答已采纳
4回答
因此，我正在编写一个可以在页面上运行的脚本，但是我想点击这个元素，不幸的是，它没有一个id，我试图在它上使用.click()函数，但是它不起作用，这就是我所拥有的，有人知道如何修复它吗？这是类中唯一的元素
var classes = document.getElementsByClassName('rateRecipe btns-one-small');
var Rate = classes[0];
Rate.click();
浏览 10提问于2014-08-30得票数 46
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
