Как сделать показанный ниже jQuery код красивее?

Question

[evil_eyes]

Взываю к гуру jQ :)
Есть блок, выводящий результаты голосования, которые закидываются в span .poll__result. В общем, есть такой код, который надо модифицировать (добавить id, for, отрисовать результат голосования типа полосы):

<div class="poll__answers">
        <div class="poll__input">
          <input class="radio" name="radio" type="radio">
          <label>Да</label>
          <span class="poll__result">68%</span>
          <div class="poll__bar"><div></div></div>
        </div>
        <div class="poll__input">
          <input class="radio" name="radio" type="radio">
          <label for="input">Нет</label>
          <span class="poll__result">9%</span>
          <div class="poll__bar"><div></div></div>
        </div>
        <div class="poll__input">
          <input class="radio" name="radio" type="radio">
          <label for="input">Не знаю/Затрудняюсь ответить</label>
          <span class="poll__result">23%</span>
          <div class="poll__bar"><div></div></div>
        </div>
      </div>

Я задачу решил, но как мне кажется, не очень изящно что ли, думаю, можно код написать более красиво и качественно, вот сам код:

function poll() {
    var results = [];
    $('.poll__result').each(function(indx, e){
      results.push($(e).text()); // собираем все значения голосов по каждому пункту
    })
    $('.poll__bar > div').each(function(indx, e){
      $(e).attr('style','width:'+results[indx]); // отрисовываем полоску % 
    })
    $('.poll__input > input').each(function(indx, e){
      $(e).attr('id','radio_' + (indx + 1)); // присваиваем каждому input="radio" id
    })
    $('.poll__input > label').each(function(indx, e){
      $(e).attr('for','radio_' + (indx + 1)); // присваиваем каждому label соответствующий id
    })
  }

Вот как-то так. Собственно спрашиваю в целях самообразования. Оно хоть и работает как надо, но, мне кажется, что как-то грубовато.
P.S. Я знаю, что вообще все эти манипуляции должны производиться на сервере и отдаваться в тело html уже готовыми. Повторюсь, что такую задачу я себе поставил и пытаюсь сделать решение красивее :) Спасибо за внимание.

Answer 1

[Anton Filippov]

Всё это можно сделать с одним each

$(".poll_input").each(function(i) {
  var $this = $(this);

  $this.find("input").attr(/* .. */);
  $this.find("label").attr(/* .. */);
  // etc.
});

Comments

[evil_eyes]

пробовал, но некорректно отрабатывал код, получалось что-то вроде
input id="radio_1"
label for="radio_2"

Если не затруднит, не могли бы подсказать как это правильно сделать с одним each? Моих познаний, к сожалению не хватает.

[Anton Filippov]

evil_eyes, набросал небольшой пример, если честно, сейчас убегаю спать, конкретно рабочий если ещё нужен будет, завтра с утра набросаю)
Но буду рад, если разберетесь сами по моей наводке.

[evil_eyes]

flppv, спасибо за наводку, разобрался :)
в итоге вот так получается:

$('.poll__input').each(function(i){
      var $this = $(this);
      $this.find(".poll__result").each(function(i, e){
        results.push($(e).text());
      })
       $this.find(".poll__bar > div").attr('style','width:'+results[i])
       $this.find("input").attr('id','radio_' + (i + 1))
       $this.find("label").attr('for','radio_' + (i + 1))
    })

[Anton Filippov]

evil_eyes, ну вот код уже красивее, и в 3 раза быстрее