Javascript 如何根据li项目的数量更改li项目之间的宽度

我正在尝试创建一个“可重用”的进度跟踪条，我需要根据li项的数量更改li项之间的宽度

我从以下位置找到此JavaScript代码：

我太接近了。有人能帮助解决使其无法工作的问题吗

$（'.progressTrackerBar ul li'）。宽度（100/$（“.progressTrackerBar ul li”）。长度+'%）
/*带边框的行*/
.progressTrackerBarRow{
显示：内联块；
宽度：700px；
高度：80px；
边框样式：实心；
边界宽度：薄；
边框颜色：蓝色；
}
/*除去子弹*/
ul#进度跟踪器{
列表样式类型：无；
}
/*横向列表*/
ul#progressTrackerBar li{
浮动：左；
显示：内联；
/*宽度：14%；/*圆圈之间的间距*/
/*宽度：var（--w）*/
位置：相对位置；
文本对齐：居中；
字体大小：大号；
}
/*圈*/
进步追踪者芭莉：之前{
内容：''；
宽度：30px；
高度：30px；
线高：30px；
边框：1px实心#9bbdfa；
显示：块；
文本对齐：居中；
保证金：-5px自动1px自动；
/*右上左下*/
边界半径：50%；
背景：径向梯度（底部70%，9bbdfa，白色）；
}
/*线条*/
ul#progressTrackerBar li:之后{
内容：''；
位置：绝对位置；
宽度：100%；
高度：2倍；
背景色：#ddd；
顶部：10px；
左-50%；
z指数：-1；
}
/*删除第一行*/
李：第一个孩子：之后{
内容：无；
}
/*活动圆圈文本*/
ul#progressTrackerBar li.active{
/*颜色：#8f6bfb*/
字号：600；
}
/*活动圆边界*/
ul#progressTrackerBar li.活动：之前{
背景：径向梯度（70%底部，#5444e1，白色）；
边框颜色：#5444e1；
}
/*活动线路*/
ul#progressTrackerBar li.活动+li:之后{
背景色：#5444e1；
}


步骤1
步骤2
步骤3
步骤4
步骤5
步骤6
步骤7

您的选择器不太正确。改用
$（'#progressTrackerBar li'）


$（'progressTrackerBar-li'）。宽度（100/$（'progressTrackerBar-li'）。长度+'%”）
/*带边框的行*/
.progressTrackerBarRow{
显示：内联块；
宽度：700px；
高度：80px；
边框样式：实心；
边界宽度：薄；
边框颜色：蓝色；
}
/*除去子弹*/
ul#进度跟踪器{
列表样式类型：无；
}
/*横向列表*/
ul#progressTrackerBar li{
浮动：左；
显示：内联；
/*宽度：14%；/*圆圈之间的间距*/
/*宽度：var（--w）*/
位置：相对位置；
文本对齐：居中；
字体大小：大号；
}
/*圈*/
进步追踪者芭莉：之前{
内容：''；
宽度：30px；
高度：30px；
线高：30px；
边框：1px实心#9bbdfa；
显示：块；
文本对齐：居中；
保证金：-5px自动1px自动；
/*右上左下*/
边界半径：50%；
背景：径向梯度（底部70%，9bbdfa，白色）；
}
/*线条*/
ul#progressTrackerBar li:之后{
内容：''；
位置：绝对位置；
宽度：100%；
高度：2倍；
背景色：#ddd；
顶部：10px；
左-50%；
z指数：-1；
}
/*删除第一行*/
李：第一个孩子：之后{
内容：无；
}
/*活动圆圈文本*/
ul#progressTrackerBar li.active{
/*颜色：#8f6bfb*/
字号：600；
}
/*活动圆边界*/
ul#progressTrackerBar li.活动：之前{
背景：径向梯度（70%底部，#5444e1，白色）；
边框颜色：#5444e1；
}
/*活动线路*/
ul#progressTrackerBar li.活动+li:之后{
背景色：#5444e1；
}


步骤1
步骤2
步骤3
步骤4
步骤5
步骤6
步骤7

您的选择器不太正确。改用
$（'#progressTrackerBar li'）


$（'progressTrackerBar-li'）。宽度（100/$（'progressTrackerBar-li'）。长度+'%”）
/*带边框的行*/
.progressTrackerBarRow{
显示：内联块；
宽度：700px；
高度：80px；
边框样式：实心；
边界宽度：薄；
边框颜色：蓝色；
}
/*除去子弹*/
ul#进度跟踪器{
列表样式类型：无；
}
/*横向列表*/
ul#progressTrackerBar li{
浮动：左；
显示：内联；
/*宽度：14%；/*圆圈之间的间距*/
/*宽度：var（--w）*/
位置：相对位置；
文本对齐：居中；
字体大小：大号；
}
/*圈*/
进步追踪者芭莉：之前{
内容：''；
宽度：30px；
高度：30px；
线高：30px；
边框：1px实心#9bbdfa；
显示：块；
文本对齐：居中；
保证金：-5px自动1px自动；
/*右上左下*/
边界半径：50%；
背景：径向梯度（底部70%，9bbdfa，白色）；
}
/*线条*/
ul#progressTrackerBar li:之后{
内容：''；
位置：绝对位置；
宽度：100%；
高度：2倍；
背景色：#ddd；
顶部：10px；
左-50%；
z指数：-1；
}
/*删除第一行*/
李：第一个孩子：之后{
内容：无；
}
/*活动圆圈文本*/
ul#progressTrackerBar li.active{
/*颜色：#8f6bfb*/
字号：600；
}
/*活动圆边界*/
ul#progressTrackerBar li.活动：之前{
背景：径向梯度（70%底部，#5444e1，白色）；
边框颜色：#5444e1；
}
/*活动线路*/
ul#progressTrackerBar li.活动+li:之后{
背景色：#5444e1；
}


步骤1
步骤2
步骤3
步骤4
步骤5
步骤6
步骤7

您需要针对正确的li元素：

$('#progressTrackerBar li').width( 100 / $("#progressTrackerBar li").length + '%' );

您需要针对正确的li元素：

$('#progressTrackerBar li').width( 100 / $("#progressTrackerBar li").length + '%' );

Tha