如何获取附近div元素的输入属性值和背景颜色？答案

【问题标题】：How to get value of input attribute and background color of nearby div element?如何获取附近div元素的输入属性值和背景颜色？
【发布时间】：2018-10-30 14:34:52
【问题描述】：

我有一些带有id = "ctl00_ContentPlace_dvColorsArea" 的 div，该 div 里面有文本类型的输入。

在每个输入下，我都有包含另一个子 div 的 div 元素。

示例如下：

<div id="ctl00_ContentPlace_dvColorsArea">

    <input name="ctl00$ContentPlace$ctl00" type="text" legendlabel="Zone:  AGR" style="display: none;">
    <div class="sp-replacer sp-light sp-active">
            <div class="sp-preview">
                <div class="sp-preview-inner" style="background-color: rgb(235, 217, 190,0.12);"></div>
            </div>
    </div>

    <input name="ctl00$ContentPlace$ctl00" type="text" legendlabel="Zone:  ZGY" style="display: none;">
    <div class="sp-replacer sp-light sp-active">
            <div class="sp-preview">
                <div class="sp-preview-inner" style="background-color: rgb(85, 45, 50);"></div>
            </div>
    </div>

</div>

在某些时候，我需要从名称为 legendlabel 的每个输入属性中获取他的值和子 div 的背景颜色在输入元素下。

例如根据上面的HTML：

[{
    legendlabel:"Zone:  AGR"
    backgroundColor:rgb(235, 217, 190,0.12)
},
{
    legendlabel="Zone:  ZGY"
    backgroundColor:rgb(85, 45, 50)
}]

我知道使用这一行$("#ctl00_ContentPlace_dvColorsArea :input").attr(legendlabel); 我可以获得每个输入的属性值。但我还需要一个孩子的 div 背景颜色。

知道如何从名称为 legendlabel 的每个输入属性中获取他的值和子 div 的背景颜色在输入元素下？

【问题讨论】：

标签： javascript jquery html asp.net

【解决方案1】：

检查一下

var ele = document.getElementById('ctl00_ContentPlace_dvColorsArea').getElementsByTagName("input");
var output = [...ele].map((val, i)=> {
  return {
   legendlabel: val.getAttribute("legendlabel"),
   backgroundColor: $(val).next().find('.sp-preview-inner').css('background-color')
  }
});

console.log(output);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ctl00_ContentPlace_dvColorsArea">

    <input name="ctl00$ContentPlace$ctl00" type="text" legendlabel="Zone:  AGR" style="display: none;">
    <div class="sp-replacer sp-light sp-active">
            <div class="sp-preview">
                <div class="sp-preview-inner" style="background-color: rgb(235, 217, 190,0.12);"></div>
            </div>
    </div>

    <input name="ctl00$ContentPlace$ctl00" type="text" legendlabel="Zone:  ZGY" style="display: none;">
    <div class="sp-replacer sp-light sp-active">
            <div class="sp-preview">
                <div class="sp-preview-inner" style="background-color: rgb(85, 45, 50);"></div>
            </div>
    </div>

</div>

【讨论】：

@Michael ... 被称为扩展运算符，它用于将可迭代值的值传播到另一个内部，以便 map 可以工作
您好，我刚刚注意到您有错误。我需要 id="ctl00_ContentPlace_dvColorsArea" 的 div 内的所有元素。你能更新代码吗？

【解决方案2】：

您可以使用此代码

$('#ctl00_ContentPlace_dvColorsArea :input').each(function (index, value) { 
 var label =  $(value).attr("legendlabel");
 var color = $(value).next().find(".sp-preview-inner").css("background-color");
 console.log(label);
 console.log(color);
});

【讨论】：