Ešte viac jQuery–Ak chcete zmeniť veľkosť príklad obrázka

Som zdedil webovú časť od klienta stará dodávateľa a má obraz veľkosti problém. Obrázky by mali byť 60×50 ale z nejakého zvláštneho dôvodu, pôvodný dodávateľ nútený do 42×42, tak vyzerajú rozmliaždeniu:

Dobrý obraz	Zlý obraz

Tu je značky (trochu zjednodušené):

<Tabuľka class = "Rozšírená-outlook">
<thead>
    <TR>
      <th šírka = 100′>3 Utorok</th>
    </TR>
</thead>

<TBODY>
    <TR class = "predpoveď">
      <TD šírka = 100′>
        <ul>
          <li class = "vysoká">Vysoká: 72°F</li>
          <li triedy = "nízke">Nízka: 44°F</li>
          <li triedy = "stav">Slnečný
            <img src =’http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/EN/trans/cond007.png’ Šírka = "42’ Výška = "42’ ALT =” />
          </li>
        </ul>
      </TD>
    </TR>

</TBODY>

</Tabuľka>

Všimnite si, že aj keď cestu k samotnému obrázku ukazuje správny rozmer (60×50) pôvodný dodávateľ nútený 42×42. prečo? bláznivý.

Každopádne, Chcel som rýchle a jednoduché riešenie tohto problému a obrátil som sa na jQuery. Trik bol na vyhľadanie všetkých vhodných <IMG> Tagy. Nechcel som muck asi s inými img Tagy (ktoré existuje veľa). Tento bit jQuery urobil trik:

<skript type = text/javascript"" src ="http://Ajax.googleapis.com/AJAX/libs/jQuery/1.5/jQuery.min.js"></skript>

<skript typ = "text/javascript">
     $(dokument).pripravený(Funkcia () {

         $("li.condition > img ").každý(Funkcia (index, položka)
            {
             $(položka).CSS("Šírka", "60");
             $(položka).CSS("výška", "50");
            });
     }); // na dokument zaťaženie
</skript>

Že trochu kódexu zistí kolekcia <li> Tagy ktorého trieda je "stav" a <IMG> deti. Potom vykonáva iterácie, cez to všetko. Pracoval ako kúzlo.

Pravdepodobne by mohla zjednodušenie je, ale nikdy som bol druh unix chlap, ktorý vyriešil π na 18 číslice presnosť použitia sed a awk a já nejsem tohto druhu, ak buď chlap jQuery úsmev .