如何獲得NodeList中的元素

我在一個#listdiv內有一個數量不等的.row，這些行可以用箭頭上下排列，如果該行上下沒有行，移動箭頭將停用。

我得到了NodeList，但是當我試圖改變按鈕時，我得到了錯誤unitsRows[i].getElementById is not a function

HTML

 <div id="List"/span>>
      < div id="listUnit0" class="row"> 
       <div class="text-center"/span> style="width: 50px;">
        <p>姓名</p>
         </div>/span>
        < button id="buttonMoveUnitDown" type="button" class="btn-custom mx-0" > 
         <i class="fas fa-arrow-down"/span>> </i>>
        </button> 
        < button id="buttonMoveUnitUp" type="button" class="btn-custom mx-0" > 
         <i class="fas fa-arrow-up"/span>> </i>>
        </button> 
       </div>
      </div>/span>

      < div id="listUnit1" class="row"> 
       <div class="text-center"/span> style="width: 50px;">
        <p>姓名</p>
         </div>/span>
        < button id="buttonMoveUnitDown" type="button" class="btn-custom mx-0" > 
         <i class="fas fa-arrow-down"/span>> </i>>
        </button> 
        < button id="buttonMoveUnitUp" type="button" class="btn-custom mx-0" > 
         <i class="fas fa-arrow-up"/span>> </i>>
        </button> 
       </div>
      </div>/span>
    </div>/span>

JS

function checkMoveButtons() {
  var unitsRows = document.querySelectorAll("#list .row"/span>)。
  console.log(unitsRows)。

  for (var i = 0; i < unitsRows.length; i  ) {
    listUnitAbove = unitsRows[i].previousElementSibling;
    listUnitBelow = unitsRows[i].nextElementSibling;

    if (listUnitAbove === 'null'/span>){
      unitsRows[i].getElementById('buttonMoveUnitUp').classList.add（'btn-deactivate'）。
      unitsRows[i].getElementById('buttonMoveUnitUp').disabled = true;
    } else {
      unitsRows[i].getElementById('buttonMoveUnitUp').classList.remove('btn-deactivate')
      unitsRows[i].getElementById('buttonMoveUnitUp').disabled = false;
    }

    if (listUnitBelow === 'null'){
      unitsRows[i].getElementById('buttonMoveUnitDown').classList.add（'btn-deactivate'）。
      unitsRows[i].getElementById('buttonMoveUnitDown').disabled = true;
    } else {
      unitsRows[i].getElementById('buttonMoveUnitUp').classList.remove('btn-deactivate')
      unitsRows[i].getElementById('buttonMoveUnitUp').disabled = false;
    }
  }
}

uj5u.com熱心網友回復：

ids必須是唯一的。使用document.getElementById代替：

你的HTML是無效的。

你的HTML是無效的，因為你有重復的ids。你應該使用類來代替。

你的HTML應該是這樣的。

你的HTML應該看起來像：

<div id="List"/span>>
  < div id="listUnit0" class="row"> 
    <div class="text-center"/span> style="width: 50px;">
      <p>姓名</p>
    </div>/span>
    < button type="button" class="btn-custom mx-0 buttonMoveUnitDown"> 
         <i class="fas fa-arrow-down"/span>> </i>>
        </button> 
    < button type="button" class="btn-custom mx-0 buttonMoveUnitUp">
         <i class="fas fa-arrow-up"/span>> </i>>
        </button> 
  </div>
</div>/span>

< div id="listUnit1" class="row"> 
  <div class="text-center"/span> style="width: 50px;">
    <p>姓名</p>
  </div>/span>
  < button type="button" class="btn-custom mx-0 buttonMoveUnitDown"> 
         <i class="fas fa-arrow-down"/span>> </i>>
        </button> 
  < button type="button" class="btn-custom mx-0 buttonMoveUnitUp">
         <i class="fas fa-arrow-up"/span>> </i>>
        </button> 
</div>/span>

而你的函式應該是：

function checkMoveButtons（/span>）{
  var unitsRows = document.querySelectorAll("#list .row") 。
  console.log（unitsRows）。

  for (var i = 0; i < unitsRows.length; i  ) {
    listUnitAbove = unitsRows[i].previousElementSibling;
    listUnitBelow = unitsRows[i].nextElementSibling;

    if (listUnitAbove === 'null'/span>){
      unitsRows[i].querySelector('.buttonMoveUnitUp') 。 classList.add（'btn-deactivate'）。
      unitsRows[i].querySelector('.buttonMoveUnitUp').disabled = true;
    } else {
      unitsRows[i].querySelector('.buttonMoveUnitUp') 。 classList.remove（'btn-deactivate'）。
      unitsRows[i].querySelector('.buttonMoveUnitUp').disabled = false;
    }

    if (listUnitBelow === 'null'/span>){
      unitsRows[i].querySelector('.buttonMoveUnitDown') 。 classList.add（'btn-deactivate'）。
      unitsRows[i].querySelector('.buttonMoveUnitDown').disabled = true;
    } else {
      unitsRows[i].querySelector('.buttonMoveUnitUp') 。 classList.remove（'btn-deactivate'）。
      unitsRows[i].querySelector('.buttonMoveUnitUp').disabled = false;
    }
  }

uj5u.com熱心網友回復：

你的HTML有重復的ID#buttonMoveUnitUp和#buttonMoveUnitDown。我把它們改成了類。

我還把你的for回圈，改為forEach，因為它更干凈，更容易使用。

然后我把重復的if / else陳述句改成了一個函式，這樣就更容易看到它在做什么。

function checkMoveButtons() {
  const unitRows = document.querySelectorAll("#list .row") 。

  unitRows.forEach((row) =>  {
    const up = row.previousElementSibling;
    const down = row.nextElementSibling;
    const btnMoveUp = up.querySelector(".buttonMoveUnitUp") 。
    const btnMoveDown = up.querySelector(".buttonMoveUnitDown") 。
    toggleBtn（up, btnMoveUp）。
    toggleBtn(down, btnMoveDown)
  });
}

function toggleBtn(neighbour, btn) {
  if (! neighbour) {
    btn.classList.add("btn-deactivate") 。
    btn.disabled = true。
  } else {
    btn.classList.remove("btn-deactivate"/span>)。
    btn.disabled = false。
  }
}

checkMoveButtons()

.btn-deactivate{
  color: gray;
}

< link rel="styleheet" href="https: //cdnjs. cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all. min. css" integrity="sha512- YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="/span> crossorigin="anonymous" referrerpolicy="no-referrer" 
/>

<div id="List"> 
  < div id="listUnit0" class="row"> 
    <div class="text-center"/span> style="width: 50px;">
      <p>姓名</p>
    </div>/span>
    < button type="button" class="buttonMoveUnitDown btn-custom mx-0" >
      <i class="fas fa-arrow-down"/span>> </i>>
    </button> 
    < button type="button" class="buttonMoveUnitUp btn-custom mx-0" >
      <i class="fas fa-arrow-up"/span>> </i>>
    </button> 
  </div>
</div>/span>

< div id="listUnit1" class="row"> 
  <div class="text-center"/span> style="width: 50px;">
    <p>姓名</p>
  </div>/span>
  < button type="button" class="buttonMoveUnitDown btn-custom mx-0" >
    <i class="fas fa-arrow-down"/span>> </i>>
  </button> 
  < button type="button" class="buttonMoveUnitUp btn-custom mx-0" >
    <i class="fas fa-arrow-up"/span>> </i>>
  </button> 
</div>/span>

標籤：

上一篇：當陣列中的新物件被更新時，函式不運行-防止物件陣列中的重復。

下一篇：重新繪制jframe的更好方法