Cliquez sur chaque premier (longueur de l'enfant non définie) radio enfant

Question

Je voudrais cliquer sur chaque premier enfant de class = « cf » et devrait être dans l'ordre, d'abord cf d'abord parce que l'autre radio est désactivé, sauf si vous cliquez sur le premier. Le cf longueur est indéterminée (dans cet exemple je mets 3) donc je dois d'abord obtenir la longueur de l'enfant de ol> li et boucle le clic là.

Voici la structure du 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

Vous avez la solution de this answer

Je viens de faire quelques ajustements.

   .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

Cela devrait fonctionner:
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})