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的append方法没有返回附加项，它会返回您追加的元素，这意味着您的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);

专业提示：使用调试来测试您的假设。在这种情况下，您假设fh和sh变量包含对附加元素的引用。将这些变量输出到控制台，或者使用断点来观察它们的内容，否则就会显示出来。

Answer 2

要作为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 3

您可以像这样使用clone。

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

jQuery挂钩到附加元素

3 个答案: