Samt Meira jQuery–Búa til mynd Dæmi

Ég erfði vefur hluti af gamla seljanda a viðskiptavinarins og það hefur stærð vandamál.  Myndirnar ættu að vera 60×50 en fyrir sumir stakur ástæða, upprunalega söluaðili neyðist þá í 42×42, svo þeir líta squashed:

 

Góð mynd

Bad Mynd

Hér er Markup (nokkuð einfaldað):

<'á útbreiddur-Horfur' Tafla class =>
  <thead>
    <tr>
      <th  width = '100′>3 Þriðjudagur</th>
    </tr>
  </thead>

  <tbody>
    <tr class = "spá">
      <td width = '100′>
        <Street>
          <Li class = 'hár'>Hár: 72&þú;F</Li>
          <Li class = "lítið">Low: 44&þú;F</Li>
          <Li Class = 'ástand'>Sunny
            <IMG src =’
HTTP://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ Breidd = '42’ height = '42’ alt =” />
          </Li>
        </Street>
      </td>
    </tr>

  </tbody>

</borð>

Þú munt hafa í huga að jafnvel þótt slóð að myndinni sjálfri sýnir rétta vídd (60×50) upprunalega söluaðili neyðist það í 42×42.  Hvers vegna?  Crazy.

Engu að síður, Ég vildi a fljótur og þægilegur lausn á þessu máli og ég varð að jQuery.  The bragð var að finna allar viðeigandi <IMG> merki.  Ég vildi ekki muck um með öðrum IMG tags (þar af eru margir).  Þessi hluti af jQuery gerði bragð:

<handrit type = "text / javascript" src ="HTTP://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></handrit>

<handrit type = "text / javascript">
     $(skjal).tilbúinn(virka () {

         $(‘li.condition > 'IMG).hver(virka (Vísitala, atriði)
           
{
             $(atriði).CSS("Breidd", "60"); 
             $(atriði).CSS("Hæð", "50");
            });
     }); // á hleðslu skjal
</handrit>

Það bita af kóða finnur safn <Li> merki þar sem bekknum er "ástand" og <IMG> börn.  Það iterates þá í gegnum allt það.  Vann eins og a þokki.

Ég gæti líklega einfalda hana, en ég var aldrei góður í Unix strákur að leysa π að 18 tölustafir nákvæmni nota sed og awk og ég er ekki þannig ef jQuery gaur annaðhvort bros.

</enda>

Gerast áskrifandi að bloggið mitt.

Fylgdu mér á Twitter á http://www.twitter.com/pagalvin

Eftir svar

Netfangið þitt verður ekki birt. Nauðsynlegir reitir eru merktir *