點擊每個第一個孩子無線電（未定義子長）

Question

我想點擊的類=「CF」每個第一個孩子，應該是爲了，第一CF首先是因爲，除非你點擊其他無線電被禁用第一個。 cf長度未確定（在本例中，我把3），所以我需要先獲得ol> li的孩子的長度並在那裏循環點擊。

下面是HTML的結構

<div id="group-attr-selects" class="grouped-select"> 
<ol> 
    <li class="opt-label">Dimensions</li> 
    <div id="conf-container-1549" class="cf"> 
     <div class="optdiv"> 
      <input name="conf-radio-0" id="conf-radio-1461" type="radio" value="1461"> 
      <label class="optdiv-label" for="conf-radio-1461">3" H x 3" W</label> 
     </div> 
     <div class="optdiv"> 
      <input name="conf-radio-0" id="conf-radio-1421" type="radio" value="1421"> 
      <label class="optdiv-label" for="conf-radio-1421">4" H x 4" W</label> 
     </div> 
    </div> 

    <div id="err-attribute1549" style="color: red; margin-bottom: 5px"></div> 

    <li class="opt-label">Color</li> 
    <div id="conf-container-1379" class="cf"> 
     <div class="optdiv"> 
      <input name="conf-radio-1" id="conf-radio-12791" type="radio" value="12791"> 
      <label class="optdiv-label" for="conf-radio-12791">Black on Almond</label> 
     </div> 
     <div class="optdiv"> 
      <input name="conf-radio-1" id="conf-radio-12796" type="radio" value="12796"> 
      <label class="optdiv-label" for="conf-radio-12796">Black on Brushed Aluminum</label> 
     </div> 
     <div class="optdiv"> 
      <input name="conf-radio-1" id="conf-radio-12798" type="radio" value="12798"> 
      <label class="optdiv-label" for="conf-radio-12798">Black on Brushed Brass</label> 
     </div> 
     <div class="optdiv"> 
      <input name="conf-radio-1" id="conf-radio-12794" type="radio" value="12794"> 
      <label class="optdiv-label" for="conf-radio-12794">Black on Brushed Gold</label> 
     </div> 
    </div> 

    <div id="err-attribute1379" style="color: red; margin-bottom: 5px"></div> 

    <li class="opt-label">Mounting Type</li> 
    <div id="conf-container-2605" class="cf"> 
     <div class="optdiv"> 
      <input name="conf-radio-2" id="conf-radio-76" type="radio" value="76"> 
      <label class="optdiv-label" for="conf-radio-76">Adhesive</label> 
     </div> 
     <div class="optdiv"> 
      <input name="conf-radio-2" id="conf-radio-762" type="radio" value="762"> 
      <label class="optdiv-label" for="conf-radio-762">No Mounting</label> 
     </div> 
    </div> 
    <div id="err-attribute2605" style="color: red; margin-bottom: 5px"></div> 
</ol> 

Answer 1

得到了解決方案從this answer

我只是做了一些調整。

   .findAllByCssSelector('#group-attr-selects > ol > div.cf') 
        .then(function (elementArray) { 
         return Promise.all(elementArray.map(function (element) { 
          return element.getVisibleText() 
           .then(function (children) { 
            for(var i=0; i < children.length; i++){ 
             return element.findByCssSelector('.optdiv > input') 
              .then(function (inp) { 
               return inp.click(); 
              }); 
            } 
           }); 
         })); 
        }) 

Answer 2

這應該工作：
jQuery的：

$('.cf').each(function(i, item){$(item).find('input[type="radio"]')[0].click()}) 

JS：

Array.from(document.getElementsByClassName('cf')).forEach(function(item){item.querySelector('input[type="radio"]').checked = true})