jQuery使用子元素的宽度添加padding-right

Question

我需要从子元素添加宽度为padding-right css。这就是我的想法：

的jQuery

$('.parent_element').css('padding-right', $(this).children('.child_element').width() + 'px');

HTML

<a href="#" class="parent_element"><i class="fa"></i> Example <span class="child_element">101</span></a>

但它没有将此css添加到父元素。

Answer 1

代码中的

this将是当前范围中this的值，而不是.css方法的目标。要实现您的目标，您需要创建一个新范围。为此，您可以将函数传递给返回所需值的.css：

$('.parent_element').css('padding-right', function(){
    return $(this).children('.child_element').width() + 'px'
});

Answer 2

您可以将功能用作second argument

$('.parent_element').css('padding-right', function () {
  return $(this).children('.child_element').width() + 'px';
});

Example