在 getElementsByClassName 迭代器中搜索以前缀开头的 class

Question

我正在尝试提取一个以前缀 (val) 开头的 class 值所以我使用 document.getElementsByClassName 查找所有父项 classes (CItem te1) 并找到内部 classes 值。

var items = document.getElementsByClassName('CItem te1');
for(var i=0; i<items.length; i++)
            {
                var codice = items[i].getElementsByClassName('CCodPub')[0];
                var name = items[i].getElementsByClassName('CSubEv')[0];
                var realname = name.getElementsByTagName("span");
                var nom = realname[0];
                var quota = $('[class^="val"]').html();
                var league = items[i].getElementsByClassName('CEvento')[0];
                var signe = items[i].getElementsByClassName('CSegno')[0];
                alert (quota );
            }}

此代码将 return 所有 classes 的相同配额值的问题找到了如何执行此行：

var quota = $('[class^="val"]').html();在每个项目 {items[i]}

内

此代码必须 return 在第一个警报中为 1.50，在第二个警报中为 1.90

function change() {
     var items = document.getElementsByClassName('CItem te1');
for(var i=0; i<items.length; i++)
                {
     var codice = items[i].getElementsByClassName('CCodPub')[0];
     var name = items[i].getElementsByClassName('CSubEv')[0];
     var realname = name.getElementsByTagName("span");
                    var nom = realname[0];
                    var quota = $('[class^="val"]').html();
     var league = items[i].getElementsByClassName('CEvento')[0];
     var signe = items[i].getElementsByClassName('CSegno')[0];
     alert (quota );
                    //alert('Code '+codice.innerHTML+' nom '+nom.innerHTML+' League '+league.innerHTML+' Signe '+signe.textContent);
                }
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<body onload="change()">
<div class='CItem te1'>
                                    <div class="CInfo" title="Portugal - Taca de Portugal"></div>
                                    <div class="CCodPub">1039</div>
                                    <div class='CEvento'>Portugal - Taca de Portugal</div>
                                    <div class="CSubEv"><span id="h_w_PC_cCoupon_repCoupon_ctl01_SE" title="Benfica  -  Guimaraes [at Estadio do Jamor]">Benfica  -  Guimaraes [at Estadio do Jamor]</span></div>
                                    
                                    
                                            <div class="COdds False">
                                                  
                                                <a id="h_w_PC_cCoupon_repCoupon_ctl01_repCouponDetails_ctl00_LinkButton1" title="Remove from betslip" class="CDelete" href="javascript:__doPostBack('h$w$PC$cCoupon$repCoupon$ctl01$repCouponDetails$ctl00$LinkButton1','')"></a>
                                                <div class="CSegno" title='1'><span id="h_w_PC_cCoupon_repCoupon_ctl01_repCouponDetails_ctl00_Label1" class="ClblSegno">Mark:</span>1</div>
                                                <div class='val_1'>1.50</div>
                                                <div class="DIQ" id="DIQ_5049570680">1|1.36|S|0</div>
                                                
                                           </div>
                                        
                                </div>
<div class='CItem te1'>
                                    <div class="CInfo" title="Portugal - Taca de Portugal"></div>
                                    <div class="CCodPub">1039</div>
                                    <div class='CEvento'>Portugal - Taca de Portugal</div>
                                    <div class="CSubEv"><span id="h_w_PC_cCoupon_repCoupon_ctl01_SE" title="Benfica  -  Guimaraes [at Estadio do Jamor]">Benfica  -  Guimaraes [at Estadio do Jamor]</span></div>
                                    
                                    
                                            <div class="COdds False">
                                                  
                                                <a id="h_w_PC_cCoupon_repCoupon_ctl01_repCouponDetails_ctl00_LinkButton1" title="Remove from betslip" class="CDelete" href="javascript:__doPostBack('h$w$PC$cCoupon$repCoupon$ctl01$repCouponDetails$ctl00$LinkButton1','')"></a>
                                                <div class="CSegno" title='1'><span id="h_w_PC_cCoupon_repCoupon_ctl01_repCouponDetails_ctl00_Label1" class="ClblSegno">Mark:</span>1</div>
                                                <div class='val_8'>1.90</div>
                                                <div class="DIQ" id="DIQ_5049570680">1|1.36|S|0</div>
                                                
                                           </div>
                                        
                                </div>
                              </body>

Answer 1

一个简单的 $.each() 将达到您的预期，因为我看到您在回答中也包含了 jQuery。 css 选择器是正确的，您只需遍历元素并获取其内部文本

$('[class^="val_"]').each(function() {
    alert($(this).text());
});

或者简单地说，使用 javascript，但使用有用的 document.querySelectorAll 函数。

var elementsArray = document.querySelectorAll('[class^="val_"]');

for (var i = 0; i < elementsArray.length; i++) {
    alert(elementsArray[i].innerText);
}

这是了解函数更多信息的最佳资源：querySelectorAll() on MDN

在 getElementsByClassName 迭代器中搜索以前缀开头的 class

Search a class that start with prefix inside getElementsByClassName iterator

javascript

jquery

getelementsbyclassname