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

Question

I have some div with id = "ctl00_ContentPlace_dvColorsArea" inside that div I have inputs of type text.

Under every input I have div element that contains another child div.

Here is example:

<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>

At some point I need to get from every input attribute with name legendlabel his value and background-color of the child div under the input element.

For example according to HTML above :

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

I know that using this row $("#ctl00_ContentPlace_dvColorsArea :input").attr(legendlabel); I can get attribute value of every input. But I need to get also a childs div background color.

Any idea how can I get from every input attribute with name legendlabel his value and background-color of the child div under the input element?

Answer 1

you can use this code

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

check this

 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>