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);
  });

Answer 2

通过略微修改curtain函数以使用each（并使用jQuery选择器）进行循环，可以轻松纠正您的问题。

function curtain(){
    $('ul li').each(function(){ //loop through each `ul li` element
        var $a = $('a', this), //find the `a` element in `li` equivalent to `$(this).find('a')`
            img = $('img', this)[0], //get the element from the jQuery object
            $div = $('<div class="curtain" />'), //create a new div with your class curtain
            rgb = new ColorFinder(function favorHue(r,g,b){ //get rgb from your class
                //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(img);
        if(rgb.r && rgb.g && rgb.b){
            $div.css('background', 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')');
        }
        $a.append($div); //append div to the `a` element
    });
};

单独为每个li添加一个孩子

2 个答案: