jQuery hook на добавленный элемент

Question

Имея немного проблем, выясняя, как я могу подключиться к недавно добавленному элементу.

Идея состоит в том, чтобы добавить элемент дважды, а затем установить различные свойства css на основе добавленных элементов.

while(i < str.length){ 
    chars = str[i]; 
    dupText = "<span>" + chars + "</span>"; 

    var fh = $hc.append(dupText); //need to hook onto these 2 elements 
    var sh = $hc.append(dupText); 

    var width = fh.width()/2; 

    //These two lines don't apply any changes to the appended elements. 
    $(sh[0]).width(width); 
    $(fh[0]).css('text-indent', -width); 

    i++; 
} 

Однако, похоже, это ничего не делает. Каким будет лучший способ привязать оба эти элемента для изменения CSS?

Решения Javascript также приветствуются.

Answer 1

элемент кэша, который будет добавлен в качестве jQuery-element

var $hc = $('#parent'); 
 
var str = 'Rayon'; 
 
var i = 0; 
 
while (i < str.length) { 
 
    var chars = str[i]; 
 
    var dupText = "<span>" + chars + "</span>"; 
 
    var elem = $(dupText); 
 
    $hc.append(elem); 
 
    var width = elem.width()/2; 
 
    elem.width(width); 
 
    elem.css('text-indent', -width); 
 
    i++; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id='parent'></div>

Answer 2

Вы можете использовать clone вот так. append метод

while(i < str.length){ 
chars = str[i]; 
dupText1 = "<span>" + chars + "</span>"; 
// add css for dupText1 element 
dupText2 = $(dupText1).clone(); 
// add css for dupText2 element. 

var fh = $hc.append(dupText1); 
var sh = $hc.append(dupText2); 

i++;} 

Answer 3

JQuery в не возвращает прилагаемый элемент, он возвращает элемент, который добавляется к, что означает ваши sh и fh переменных оба относится к вашему $hc элементу. Вместо этого, получить последний ребенок $hc для каждого задания:

fh = $hc.append(dupText).children().last(); 
sh = $hc.append(dupText).children().last(); 

width = fh.width()/2; 

sh.width(width); 
fh.css('text-indent', -width); 

Pro наконечник: использовать отладку, чтобы проверить свои предположения. В этом случае вы предположили, что переменные fh и sh содержат ссылки на добавленный элемент. Вывод этих переменных на консоль или использование точки останова для наблюдения за их содержимым показал бы обратное.