Още повече jQuery–Преоразмеряване на пример изображение

Аз наследих уеб компонент от стария доставчик на клиента и има изображение размер проблем.  Изображенията трябва да бъде 60×50 но за някои странни причина, оригиналния доставчик ги принуждава в 42×42, така че те изглеждат смачкано:

 

Добър имидж

Лош имидж

Тук е за маркиране (донякъде опростен):

<маса клас = "разширена-outlook">
  <thead>
    <TR>
      <TH  ширина = "100′>3 Вторник</TH>
    </TR>
  </thead>

  <tbody>
    <TR клас = "прогноза">
      <TD ширина = "100′>
        <UL>
          <Li клас = "високо">Високо: 72&deg;F</Li>
          <Li клас = "ниска цена">Ниска: 44&deg;F</Li>
          <Li клас = "състояние">Слънчев
            <IMG src =’
HTTP://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/EN/Trans/cond007.png’ ширина = "42’ височина = "42’ ALT =” />
          </Li>
        </UL>
      </TD>
    </TR>

  </tbody>

</таблица>

Ще се отбележи, че въпреки че пътя до самото изображение показва правилното измерение (60×50) оригиналния доставчик е принуден в 42×42.  Защо?  Луд.

Все пак, Исках бързо и лесно решение за този проблем и аз се обърна към jQuery.  Номерът е да намерите всички от съответния <IMG> Тагове.  Аз не искам да се мотам с всички други img Тагове (от които има много).  Това малко на jQuery е трик:

<скрипт тип = текст/javascript"" SRC ="HTTP://AJAX.googleapis.com/AJAX/libs/JQuery/1.5/JQuery.min.js"></скрипт>

<скриптови тип = "текст/javascript">
     $(документ).готов(функция () {

         $("li.condition > IMG ").всеки(функция (индекс, елемент)
           
{
             $(елемент).CSS("ширина", "60"); 
             $(елемент).CSS("височина", "50");
            });
     }); // при зареждане на документ
</скрипт>

Този късче на код намира колекцията <Li> Тагове, чиято класа е "условие" и <IMG> деца.  Той след това повтаря през всичко това.  Работи като чар.

Вероятно може да рационализира го, но аз никога не е от вида на unix човек, този решен π за да 18 цифри прецизна sed и awk и аз не съм такъв, ако jQuery човек или Усмивка.

</край>

Абонирайте се за моя блог.

Следвайте ме на Twitter в http://www.twitter.com/pagalvin

Оставете отговор

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани *