JS 在HTML更改class 後的index一問

javascript

tung167349 2021-06-13 14:46:59 ‧ 965 瀏覽

新手一問
語句:

<div class="counter_1_item" index="1">

如何可以在html把Class後的index="1" 改成index="2"

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

iT邦研究生 5 級 ‧ 2021-06-13 17:02:04

最佳解答

透過 setAttribute 方法，可參考 MDN Element.setAttribute()

document.querySelector(".counter_1_item").setAttribute("index", 2)

回應 6
分享
檢舉

看更多先前的回應...收起先前的回應...

tung167349 iT邦新手 5 級 ‧ 2021-06-14 09:10:09 檢舉

為何我在Console輸入它顯示

Uncaught TypeError: Cannot read property 'setAttribute' of null
    at <anonymous>:1:64

大神幫幫忙感恩

淺水員 iT邦大師 6 級 ‧ 2021-06-14 10:05:06 檢舉

這代表 setAttribut 前面的東西並沒有取到網頁元素，而是一個空值
請檢查 document.querySelector("XXXXXX") 是不是正確

PH iT邦研究生 5 級 ‧ 2021-06-14 12:58:14 檢舉

你可以在網頁中先透過 document.querySelector("body") 驗證你寫的語法是可以正確取得網頁元素的(這裡會是 body)
確認可以拿到元素後再替換成你自己的 class 名稱

tung167349 iT邦新手 5 級 ‧ 2021-06-16 10:47:56 檢舉

明白了
但發現實際比想像更複習
我直接從簡把它貼出來
大神有方法嗎
(也是一樣把全部的<div class="counter_1_item" index="1">內的index改成"2")
麻煩了感恩

<body>
<form name="form1" method="post" action="./test.aspx?uid=733746c74e89&amp;type=1" id="form1" class="layui-form">    
    <div class="report1_banxin">    
        <div class="report1_main">
            <ul class="counter_1_main">    
                <li class="counter_li_question_item"question-uid="a1509a262" type="1">
                    <div class="counter_1_item" index="1">
                        <div class="counter_1_son1" data-val="0">            
                    </div>        
                    </ul>
                </li>
            </ul>
     </div>
    </div>
    </form>
</body>

PH iT邦研究生 5 級 ‧ 2021-06-16 11:25:41 檢舉

如果你的需求是需要將多個有相同 class 名稱的網頁元素都要修改它的 index 的值，那麼在選取網頁元素的語法上，你需要透過
document.querySelectorAll 方法(語法說明請參考 MDN document.querySelectorAll)。

這時候你會拿到一個類陣列(array-like) 的 NodeList，然後你可以透過使用 forEach 方法依序將每一個網頁元素的 index 的值做修改

參考程式碼：

<!-- html -->
<div class="counter_1_item" index="2"></div>
<div class="counter_1_item" index="2"></div>
<div class="counter_1_item" index="2"></div>
<div class="counter_1_item" index="2"></div>
<div class="counter_1_item" index="2"></div>
<div class="counter_1_item" index="2"></div>

// js
const elements = document.querySelectorAll(".counter_1_item");

elements.forEach(element => {
  element.setAttribute("index", 2) 
});

tung167349 iT邦新手 5 級 ‧ 2021-06-16 23:54:01 檢舉

document.querySelectorAll(".counter_1_item");
是可以拿到Nodelist,但為何我使用了forEach的方法
index的值也不能由1 改成2?

謝謝大神辛苦了

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙