jquery - 分别为每个 li 添加一个 child

Question

我正在尝试分别为列表中的每个元素添加一个窗帘 div。我可以轻松地为每个元素添加一个 div:

$("ul li a").append('<div class="curtain"></div>');

但我需要能够设置创建的每个窗帘的背景颜色属性。

function curtain() {
        var el = document.getElementByTagName('ul li');
        this.anchor = el.querySelector('a');
        this.image = el.querySelector('img');
        this.curtain = document.createElement( 'div' );
        this.curtain.className = 'curtain';
        var rgb = new ColorFinder( function favorHue(r,g,b) {
            // exclude white
            //if (r>245 && g>245 && b>245) return 0;
            return (Math.abs(r-g)*Math.abs(r-g) + Math.abs(r-b)*Math.abs(r-b) + Math.abs(g-b)*Math.abs(g-b))/65535*50+1;
        } ).getMostProminentColor( this.image );
        if( rgb.r && rgb.g && rgb.b ) {
            this.curtain.style.background = 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
        }
        this.anchor.appendChild(this.curtain);
    };

目前不适用于此，我不确定为什么。

Answer 1

您可以使用您输入的同一行，但进行一些编辑:

$("ul li")each(function()
  {
    var new_div=$('<div class="curtain"></div>');
    // get the color with your code 
    new_div.css({"background":'rgb('+rgb.r+','+rgb.g+','+rgb.b+')'})
    //$(this) is an (ul li) item
    $(this).find("a").append(new_div);
  });