Klicken Sie auf jedes erste Kind Radio (undefined Kind Länge)

Question

Ich möchte jedes erste Kind von class = „cf“ klicken und sollte, um zunächst cf erste sein, weil die anderen Funk deaktiviert ist, wenn Sie klicken der erste. Die cf Länge ist unbestimmt (in diesem Beispiel habe ich 3), also muss ich zuerst die Länge des Kindes von ol> li bekommen und das Klicken dort schlingen. Hier

ist die Struktur des 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

Die Lösung von this answer

Ich habe nur ein paar Anpassungen vorgenommen.

   .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

Dies sollte funktionieren:
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})