Question

我的div中有一个id = "ctl00_ContentPlace_dvColorsArea"的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>

在某个时候，我需要从每个带有Legendleglabel的输入属性中获取其值和子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); 我可以获得每个输入的属性值。但是我还需要获取childs div背景颜色。

任何想法我怎么能从每个带有Legendleglabel的输入属性中获取其值和子div的背景颜色在输入元素下面？

Answer 1

您可以使用此代码

$('#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);
});

Answer 2

检查此

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>

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

2 个答案: