Добавление ребенка к каждому li индивидуально

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

В настоящее время для этого не работает, и я не уверен, почему.

jquery html css appendchild

0

user3684127 28 Май 2014 в 18:54

1

$("SELECTOR").each(function(){ $(this).append('<div class="curtain"></div>'); }

–

display-name-is-missing

28 Май 2014 в 18:56

3

Если вы используете jQuery, почему вы делаете такие вещи, как document.getElementByTagName('ul li');?

–

j08691

28 Май 2014 в 18:57

document.getElementByTagName даже не существует, это document.getElementsByTagName, и он работает, только если вы дадите ему одно имя тега (например, "ul" или "li")

–

Bart

28 Май 2014 в 19:02

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

0

Majed DH 28 Май 2014 в 19:51

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

0

Adam Merrifield 28 Май 2014 в 19:12

Добавление ребенка к каждому li индивидуально

2 ответа

Похожие вопросы

Новые вопросы

jquery