使用jQuery将兄弟元素子节点文本值设为元素CSS width属性值

问题原因 #

你的原始代码不生效的核心是$(this)的指向不符合预期：你直接向.css()方法传入取值表达式时，该表达式会立即执行，此时this指向的是外层作用域对象（通常是window），无法指向你选中的每个.progress-bar-percentage元素，自然拿不到对应相邻节点的百分比值。

修复方案 #

你可以通过遍历每个目标元素的方式修正this指向，有两种常用写法：

写法1：用.each()显式遍历 #

$('.progress-bar-percentage').each(function() {
  // 遍历过程中this指向当前正在处理的.progress-bar-percentage元素
  const targetWidth = $(this).siblings('.percentage-script').find('.percentage-value').text();
  $(this).css('width', targetWidth);
});

写法2：使用.css()方法的回调参数（更简洁） #

jQuery的.css()方法支持第二个参数传入回调函数，回调的返回值会作为属性设置值，且回调内部的this自动指向当前处理的元素：

$('.progress-bar-percentage').css('width', function() {
  return $(this).siblings('.percentage-script').find('.percentage-value').text();
});

额外注意事项 #

要让百分比宽度生效，需要确保两个样式前提：

• 父元素.progress-bar-total已经设置了明确的宽度值
• .progress-bar-percentage元素的display属性为block/inline-block，且没有设置max-width等属性限制宽度

内容的提问来源于stack exchange，提问作者Paul Rodriguez