代码之家 › 专栏 › 技术社区 › Joannes

使用jquery迭代每个DIV属性?[复制品]

html jquery

Joannes · 技术社区 · 6 年前

这个问题已经有了答案:

jQuery each returning only last element, Google charts API 1答

我正在尝试获取每个分区的rgb和index值。在控制台中,我正确地获取了所有内容(index和b 每个分区的背景色)。尝试将每个值添加到磷在每一个 div 我只为每个重复最后一个值 div :蓝色十六进制和数字5。我如何解决?

.red {
    background-color:red; 
}.orange {
    background-color:orange; 
}
.yellow {
    background-color:yellow; 
}
.purple {
    background-color:purple; 
}
.blue {
    background-color:blue; 
}
<div class="red"><p></p></div>
<div class="orange"><p></p></div>
<div class="yellow"><p></p></div>
<div class="purple"><p></p></div>
<div class="blue"><p></p></div>

$('div').each(function(index) {
  var x = $(this).css('background-color');
  $("div p").text(index+x);
  console.log(index+x);
});

[日志]rgb(255,0,0)ff0000
[日志]rgb(255,165,0)ffa500
[日志]rgb(255,255,0)ffff00
[日志]RGB(128,0,128)800080
[日志]RGB(0,0,255)0000FF

2 回复 | 直到 6 年前

freefaller 6 年前

更改以下内容…

$("div p").text(index+x);

为了…

$(this).find("p").text(index+x);

目前,您正在查找所有 <div> 元素,并填充 <p> 在每一个…这就是为什么你看到的最终价值

$('div').each(function(index) {
  var x = $(this).css('background-color');
  $(this).find("p").text(index+x);
  console.log(index+x);
});

.red {
    background-color:red; 
}.orange {
    background-color:orange; 
}
.yellow {
    background-color:yellow; 
}
.purple {
    background-color:purple; 
}
.blue {
    background-color:blue; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="red"><p></p></div>
<div class="orange"><p></p></div>
<div class="yellow"><p></p></div>
<div class="purple"><p></p></div>
<div class="blue"><p></p></div>

Luay 6 年前

基本上,您有正确的函数,但是需要使用.eq(index)来实际地在foreach函数中影响特定的索引。这类似于访问数组中的索引,例如randomarray(0)=>1。

$('div').each(function(index) {
  var x = $(this).css('background-color');
  $("div p").eq(index).text(index+x);
  console.log(index+x);
});

.red {
    background-color:red; 
}

.cyan {
  background-color:cyan;
}

.green {
  background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="red"><p></p></div>
<div class="cyan"><p></p></div>
<div class="green"><p></p></div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

7 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

8 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

8 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

8 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

8 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

8 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

8 月前