javascript - 如何根据 li 元素的数量更改 li 元素之间的宽度

Question

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

我从 this other question 找到这段 JavaScript 代码:

$('.lesson-nav ul li').width( 100 / $(".lesson-nav ul li").length + '%' );

我很亲近。有人可以帮助解决导致它不起作用的问题吗？

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

/*row with border*/

.progressTrackerBarRow {
  display: inline-block;
  width: 700px;
  height: 80px;
  border-style: solid;
  border-width: thin;
  border-color: blue;
}


/*remove bullets*/

ul#progressTrackerBar {
  list-style-type: none;
}


/*horizontal list*/

ul#progressTrackerBar li {
  float: left;
  display: inline;
  /*width: 14%;  /*Space between circles*/
  /*width: var(--w);*/
  position: relative;
  text-align: center;
  font-size: large;
}


/*circles*/

ul#progressTrackerBar li:before {
  content: '';
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #9bbdfa;
  display: block;
  text-align: center;
  margin: -5px auto 1px auto;
  /*top right bottom left*/
  border-radius: 50%;
  background: radial-gradient(at 70% bottom, #9bbdfa, white);
}


/*lines*/

ul#progressTrackerBar li:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #ddd;
  top: 10px;
  left: -50%;
  z-index: -1;
}


/*remove first line*/

ul#progressTrackerBar li:first-child:after {
  content: none;
}


/*active circle text*/

ul#progressTrackerBar li.active {
  /*color: #8f6bfb;*/
  font-weight: 600;
}


/*active circle border*/

ul#progressTrackerBar li.active:before {
  background: radial-gradient(at 70% bottom, #5444e1, white);
  border-color: #5444e1;
}


/*active line*/

ul#progressTrackerBar li.active+li:after {
  background-color: #5444e1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row progressTrackerBarRow" align="center">
  <div class="container" style="width: 100%;">
    <ul id="progressTrackerBar">
      <li id="1" class="active">Step 1</li>
      <li id="2">Step 2</li>
      <li id="3">Step 3</li>
      <li id="4">Step 4</li>
      <li id="5">Step 5</li>
      <li id="6">Step 6</li>
      <li id="7">Step 7</li>
    </ul>
  </div>
</div>

Answer 1

您的选择器不太正确。使用 $('#progressTrackerBar li') 代替

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

/*row with border*/

.progressTrackerBarRow {
  display: inline-block;
  width: 700px;
  height: 80px;
  border-style: solid;
  border-width: thin;
  border-color: blue;
}


/*remove bullets*/

ul#progressTrackerBar {
  list-style-type: none;
}


/*horizontal list*/

ul#progressTrackerBar li {
  float: left;
  display: inline;
  /*width: 14%;  /*Space between circles*/
  /*width: var(--w);*/
  position: relative;
  text-align: center;
  font-size: large;
}


/*circles*/

ul#progressTrackerBar li:before {
  content: '';
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #9bbdfa;
  display: block;
  text-align: center;
  margin: -5px auto 1px auto;
  /*top right bottom left*/
  border-radius: 50%;
  background: radial-gradient(at 70% bottom, #9bbdfa, white);
}


/*lines*/

ul#progressTrackerBar li:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #ddd;
  top: 10px;
  left: -50%;
  z-index: -1;
}


/*remove first line*/

ul#progressTrackerBar li:first-child:after {
  content: none;
}


/*active circle text*/

ul#progressTrackerBar li.active {
  /*color: #8f6bfb;*/
  font-weight: 600;
}


/*active circle border*/

ul#progressTrackerBar li.active:before {
  background: radial-gradient(at 70% bottom, #5444e1, white);
  border-color: #5444e1;
}


/*active line*/

ul#progressTrackerBar li.active+li:after {
  background-color: #5444e1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row progressTrackerBarRow" align="center">
  <div class="container" style="width: 100%;">
    <ul id="progressTrackerBar">
      <li id="1" class="active">Step 1</li>
      <li id="2">Step 2</li>
      <li id="3">Step 3</li>
      <li id="4">Step 4</li>
      <li id="5">Step 5</li>
      <li id="6">Step 6</li>
      <li id="7">Step 7</li>
    </ul>
  </div>
</div>