javascript - jQuery Hook 附加元素

Question

在弄清楚如何 Hook 最近添加的元素时遇到了一些麻烦。

想法是，添加一个元素两次，然后根据已添加的元素设置不同的 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>