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

时间:2017-05-27 11:50:25

标签: javascript jquery getelementsbyclassname

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

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 );
            }}

此代码将返回所有类的相同配额值的问题,如何执行此行:

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

此代码必须在第一个警报中返回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>

1 个答案:

答案 0 :(得分: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