cleaner code in js

clean-code.js

// 6: how could you improve the following code?
$(document).ready(function() {
  $('.foo #bar').css('color', 'red');
  $('.foo #bar').css('border', '1px solid blue');
  $('.foo #bar').text('new text!');
  $('.foo #bar').click(function() {
    $(this).attr('title', 'new title');
    $(this).width('100px');
  });

  $('.foo #bar').click();
});


$(function () {
  var handleClick = function (el) {
    el.attr('title', 'new title')
      .width('100px');
  },
  
  bar = $('#bar')
  // ideally use a class for it
  
    .css({
      'color' : 'red',
      'border' : '1px solid blue'
    })
    .text('new text!')
    .click(function (e) {
      handleClick($(e.target));
    });
  handleClick(bar);
});
  
 // 8: how could you rewrite the following code to make it shorter?
(function(d, $){
  $('li.foo a').attr('title', 'i am foo');
  $('li.bar a').attr('title', 'i am bar');
  $('li.baz a').attr('title', 'i am baz');
  $('li.bop a').attr('title', 'i am bop');
})(dojo, dojo.query);

(function (d, $){
  var addTitle = function (e, title) {
    e.attr('title', title);
  };
  var classNames = ['li.foo a', 'li.bar a', 'li.baz a', 'li.bop a']
  _.each(classNames, fuction (selector) {
    addTitle(selector);
  })
})