الطريقة الأولى

و هي طريقة عادية جدا جدا ، بما أن المكتبة تدعم css1 الى css3 فإنه يمكننا استعمال أكواد css من أي جيل داخل اوامر المكتبة لتعمل بكل كفاءة ، إلا أنها لن تعمل على IE6
وهي كالتالي :

$('a[href$=".doc"]'). // مثال لملفات ذات امتداد وورد
	css({
	// هنا ساعمل تنسيق css داخل ملف js بعد استدعائي للمكتبة
	paddingRight: '18px', // أو left على احتياجك
	background: 'transparent url("word-doc.gif") no-repeat center right'
});

الطريقة الثانية

يمكننا الاستفادة من امر $.each() يمكنك أن تتعمق فيه من هنا ،

الهدف من استعمال هذا الامر ، وهو انشاء حلقة تكرار تعمل بشكل ديناميكي و نرتب لها امتدادات معينة و هي تختار كل واحد ما يلائمه ، أول شيء سننئأ عنصرا جديدا :

var fileTypes = {
  doc: 'doc.gif',
  xls: 'xls.gif',
  pdf: 'pdf.gif',
  rar: 'rar.gif',
  zip: 'zip.gif',
  exe: 'exe.gif',
  wmv: 'wmv.gif',
  rm: 'rm.gif',
  swf: 'swf.gif'
};

وزعنا في انواع الامتدادت و كل امتدادت امامه صورته التي سنخصصها له ، و الآن سعمل الحلقة بالأمر $each() :

$.each(fileTypes, function(extension,image) {
  $('a[href$="' + extension + '"]').
    css({
      paddingLeft: '18px',
      background: 'transparent url("' + image + '") no-repeat center left'
    });
});

لو تمعنت في الفرق بين هذه الطريقة و الأولى ، ستلاحظ ان هذه أذكى حيث تتم الفلترة بين الامتدادت بطريقة ديناميكية من غير أن نتدخل في كل امتداد ، و هذا أسهل و أسرع في الوقت ،
عوض كتابة الامتداد كل مرة يدويا أعطيته القيمة extension و كلما أخذ قيمة معينة من extension سياخذ الصورة التي تقابلها في العنصر الذي أنشأنا في الأول fileTypes ، و يعوضها في المكان الذي اعطيناه اسم image في سطر تنسيق css ، وهذه نتيجة الكود بأكمله :

var fileTypes = {
  doc: 'doc.gif',
  xls: 'xls.gif',
  pdf: 'pdf.gif',
  rar: 'rar.gif',
  zip: 'zip.gif',
  exe: 'exe.gif',
  wmv: 'wmv.gif',
  rm: 'rm.gif',
  swf: 'swf.gif'
};
$.each(fileTypes, function(extension,image) {
  $('a[href$="' + extension + '"]').
    css({
      paddingLeft: '18px',
      background: 'transparent url("' + image + '") no-repeat center left'
    });
});

ملاحظات

• الطريقة التي تدعم IE6 في هذا الدرس هي الطريقة الثانية
• طريقة css نافعة لأصحاب المشاريع الصغيرة ( مدونات ، مواقع صغيرة ، .. حيث يكون عدد الامتدادت صغير و محدود ) ، أما في المشاريع الكبيرة و الضخمة فإنه الأوفق و الأسلم و الأسرع لك، هي طريقة javascript ستوفر عليك وقتا و جهدا ، و هي لائقة للمشاريع الاحترافية

آمل أن تكون استفدت من هذا التطبيق ، على أمل الالتقاء في تطبيق أو درس آخر إن شاء الله تعالى .
و السلام عليكم ورحمة الله