使用不帶 id 的 class 名稱獲取 HTML 屬性的值

Question

我有下面的代碼。 我只想要 JavaScript 或 JQuery 列表形式的data-pkid屬性值，僅使用 class 名稱而不使用 ID。 我想在此游戲網站的開發者控制台上運行特定的 JS 或 JQuery

<div class="container">
    <div class="row hoverclr-electric" id="pokeR7gc32" data-pktype="electric" data-pkid="R7gc32"></div>
    <div class="row hoverclr-dark" id="pokemwvxW2" data-pktype="dark" data-pkid="mwvxW2"></div>
    <div class="row hoverclr-electric" id="pokezZLTRJ" data-pktype="electric" data-pkid="zZLTRJ"></div>
    <div class="row hoverclr-fairy" id="pokej5qWHs" data-pktype="fairy" data-pkid="j5qWHs"></div>
    <div class="row hoverclr-psychic" id="pokezmhrwv" data-pktype="psychic" data-pkid="zmhrwv"></div>
    <div class="row hoverclr-psychic" id="pokemVVB5Q" data-pktype="psychic" data-pkid="mVVB5Q"></div>
    <div class="row hoverclr-psychic" id="pokez26VC5" data-pktype="psychic" data-pkid="z26VC5"></div>
    <div class="row hoverclr-psychic" id="poker3VGC" data-pktype="psychic" data-pkid="r3VGC"></div>
    <div class="row hoverclr-psychic" id="pokeTL75r2" data-pktype="psychic" data-pkid="TL75r2"></div>
    <div class="row hoverclr-psychic" id="pokeBVJ9kC" data-pktype="psychic" data-pkid="BVJ9kC"></div>
    <div class="row hoverclr-rock" id="pokeR5FGJC" data-pktype="rock" data-pkid="R5FGJC"></div>
    <div class="row hoverclr-psychic" id="pokeBVxyy2" data-pktype="psychic" data-pkid="BVxyy2"></div>
    <div class="row hoverclr-water" id="pokeTnZkCP" data-pktype="water" data-pkid="TnZkCP"></div>
    <div class="row hoverclr-water" id="pokehybjcD" data-pktype="water" data-pkid="hybjcD"></div>
    <div class="row hoverclr-water" id="pokemVy88w" data-pktype="water" data-pkid="mVy88w"></div>
    <div class="row hoverclr-grass" id="pokeTLr6ph" data-pktype="grass" data-pkid="TLr6ph"></div>
    <div class="row hoverclr-water" id="pokeL2QFTB" data-pktype="water" data-pkid="L2QFTB"></div>
    <div class="row hoverclr-grass" id="pokerHMHR" data-pktype="grass" data-pkid="rHMHR"></div>
    <div class="row hoverclr-poison" id="pokeTgdd1w" data-pktype="poison" data-pkid="Tgdd1w"></div>
    <div class="row hoverclr-poison" id="pokeLLNZx3" data-pktype="poison" data-pkid="LLNZx3"></div>
    <div class="row hoverclr-poison" id="poke5wTPv5" data-pktype="poison" data-pkid="5wTPv5"></div>
    <div class="row hoverclr-water" id="pokeR5Qhnk" data-pktype="water" data-pkid="R5Qhnk"></div>
    <div class="row hoverclr-psychic" id="pokebZw5K5" data-pktype="psychic" data-pkid="bZw5K5"></div>
    <div class="row hoverclr-psychic" id="pokeLLFq81" data-pktype="psychic" data-pkid="LLFq81"></div>
    <div class="row hoverclr-psychic" id="pokehG7WbY" data-pktype="psychic" data-pkid="hG7WbY"></div>
    <div class="row hoverclr-psychic" id="pokeBVJCR3" data-pktype="psychic" data-pkid="BVJCR3"></div>
    <div class="row hoverclr-psychic" id="poke5p2yLt" data-pktype="psychic" data-pkid="5p2yLt"></div>
    <div class="row hoverclr-rock" id="pokemVr59D" data-pktype="rock" data-pkid="mVr59D"></div>
    <div class="row hoverclr-water" id="pokef4XXQh" data-pktype="water" data-pkid="f4XXQh"></div>
    <div class="row hoverclr-water" id="pokebZQ5Wf" data-pktype="water" data-pkid="bZQ5Wf"></div>
    <div class="row hoverclr-psychic" id="pokeTLnrss" data-pktype="psychic" data-pkid="TLnrss"></div>
    <div class="row hoverclr-ground" id="pokemNMVQ5" data-pktype="ground" data-pkid="mNMVQ5"></div>
    <div class="row hoverclr-steel" id="pokeLLZYNT" data-pktype="steel" data-pkid="LLZYNT"></div>
    <div class="row hoverclr-fire" id="poke5VMNV3" data-pktype="fire" data-pkid="5VMNV3"></div>
    <div class="row hoverclr-fire" id="pokesrP8xW" data-pktype="fire" data-pkid="srP8xW"></div>
    <div class="row hoverclr-steel" id="pokeyy9vVV" data-pktype="steel" data-pkid="yy9vVV"></div>
    <div class="row hoverclr-psychic" id="poke592SQ4" data-pktype="psychic" data-pkid="592SQ4"></div>
    <div class="row hoverclr-steel" id="pokeBqz232" data-pktype="steel" data-pkid="Bqz232"></div>
    <div class="row hoverclr-steel" id="pokebmHgZF" data-pktype="steel" data-pkid="bmHgZF"></div>
    <div class="row hoverclr-psychic" id="poker3VPv" data-pktype="psychic" data-pkid="r3VPv"></div>
    <div class="row hoverclr-fire" id="pokebxLzKp" data-pktype="fire" data-pkid="bxLzKp"></div>
    <div class="row hoverclr-fire" id="pokeBV3vL1" data-pktype="fire" data-pkid="BV3vL1"></div>
</div>

我怎樣才能得到 output 如下表

• [撲克牌]R7gc32[/撲克牌]
• [撲克牌]mwvxW2[/撲克牌]
• [撲克牌]zZLTRJ[/撲克牌]
• [撲克牌]j5qWHs[/撲克牌]

等等……我試過下面的代碼

var test = document.getElementsByClassName("row");
test.getAttribute("data-pkid");

即使我從可能的網站上查看了答案，但也沒有發現有用的信息。

Answer 1

還有一些其他方法可以得到相同的結果 1

document.querySelectorAll('.container>div').forEach(n=> )
 console.log(`[pokecard]${n.getAttribute('data-pkid')}[/pokecard]\n`)
)

2個

 document.querySelectorAll('.row').forEach(n=> 
 console.log(`[pokecard]${n.getAttribute('data-pkid')}[/pokecard]\n`)
)

Answer 2

您的代碼有問題，因為有 42 個對象的 class 名稱為“行”。 'test' 引用 HTML 的 42 個元素集合。 因為它是一個 HTML object 我們不能用 forEach 方法迭代它但是我們可以用普通循環來做，例如 for 循環

for(i=0;i<test.length;i++){
   console.log(`[pokecard]${test[i].getAttribute('data-pkid')}[/pokecard]`)
}