Autor Zpráva
jakre
Profil
Dobrý den,

chtěl bych se zeptat, jakým způsobem lze ošetřit .each() tak, aby se div#anchors v případě, kdy .inner neobsahuje žádný nadpis h3, vůbec nezobrazoval. Níže přikládám JS kód:

var ToC =
"<div id='anchors'><div class='acontent'>" +
"<h3>Přehled:</h3>" +
"<ul>";

var newLine,
    el,
    title,
    link;

$(".inner h3").each(function() {

    el = $(this);
    title = el.text();
    link = "#" + el.attr("id");

    newLine =
    "<li>" +
    "<a href='" + link + "'>" +
    title +
    "</a>" +
    "</li>";

    ToC += newLine;

});

ToC +=
"</ul>" +
"<div></div>";

$(".inner").prepend(ToC);


V případě, kdy se v .inner nenachází žádný nadpis h3, zobrazí se:
<div id="anchors"><div class="acontent"><h3>Přehled:</h3><ul></ul><div></div></div></div>

Předem děkuji
Tomášeek
Profil *
jakre:
.length (+ jQuery by mělo mít .size(), pokud se nepletu).
pcmanik
Profil
Tomášeek:
.size() je deprecated a vzhľadom na to že jQuery sa správa ako kolekcia poľa tak length funguje správne.
jakre
Profil
Tomášeek:
Děkuji. Předpokládám tedy, že mám přidat nějakou podmínku obsahující .length, ale obávám se, že to sám v tomto případě nedám dohromady. Můžeš mi to prosím nějak nastínit?

Opraveno chybné lenght, děkuji Chamurappimu.
Tomášeek
Profil *
pcmanik:
Je to možné, s jQuery nepracuji a hledat se mi nechtělo. Určitě v dokumentaci jQuery bude, že je deprecated (a k jaké verzi).

jakre:
Celý ten blok definující proměnnou Toc obal podmínkou, zda tam nějaký h3 je.

if ($(.inner h3).length > 0) {...}

Mimoto, přijde mi hloupé dělat table of contents javascriptem (navíc, pokud jQuery taháš jen kvůli tomu).
Kcko
Profil
Tomášeek:
Proč by to mělo být hloupé? Třeba ani jinou možnost nemá.
To je nějaký nový styl / směrnice, ptát se každého jestli kvůli ptané věci tahá jQuery?
Tomášeek
Profil *
Kcko:
Jaký bys měl důvod generovat table of contents pomocí JS a ne na serveru? Ano, jde to, ale výhody mi unikají, žádné nevidím. Vidím jen nevýhody, třeba nenačtení daného JS. V jaké situaci nemáš jinou (serverovou) možnost?

Ohledně jQuery, toulá se tu spousta začátečníků, pro které je jQuery modla (protože JS neumí a je třeba složitý). Tahat framework kvůli tomuto párřádku je nesmysl, bez debaty. Pokud užívá jQuery i jinde, pak OK. Všimni si ale, že jsem to dal do závorky jen tak na okraj, když už jsem měl příšpěvek rozepsaný. Nečekal jsem, že se přímo a jen té závorky někdo chytne.
Kcko
Profil
Tomášeek:
Já se toho chytnu, protože dneska je každý web plný JS a rozhodně ne nativního (každý si vypomůže frameworkem) a už mi leze na nervy jak speciálně na této diskusi to každý řeší jako by to bylo to nejhorší stáhnout si zminifikovaný soubor z CDN-ky, který má kolik, 100-150kB?
Jeden blbě napsanej skript či obrázky pod horší kompresí udělají horší rotyku.

Co se týká TOC, příklad: Detail článku, kde je obsah tvořen jedním wysiwygem (takže si tam narveme odstavce, nadpisy ...), z tohohle to uděláš jak? Regexpem / DOMem? Tj. serverovým řešením? To mi rozhodně lepší nepřijde.
Keeehi
Profil
Kcko:
DOMem?
Ano.
Chamurappi
Profil
Reaguji na jakreho:
title = el.text();
Bereš text z elementu a dáváš ho neošetřeně dovnitř HTML kódu. To znamená, že se v něm interpretují HTML značky, kdyby v textu byly…

přidat nějakou podmínku obsahující .lenght
Spíš .length. Je dobré si zapamatovat, že v oblasti webových stránek je height jediné slovo končící na ht, všude jinde je th. (Jestli jsem teď na něco nezapomněl.)


Reaguji na Kcka:
Proč by to mělo být hloupé?
Pravděpodobně to nezaindexují vyhledávače, které by jinak mohly na kotvu odkázat přímo z výsledku.

Detail článku, kde je obsah tvořen jedním wysiwygem (takže si tam narveme odstavce, nadpisy ...), z tohohle to uděláš jak?
Výstup z WYSIWYGu stejně musí obvykle projít nějakou kontrolou nebo přežvýkáním. V nejhorším případě, pokud opravdu nejde použít server-side řešení, bych upravil to javascriptové ukládání z WYSIWYGu, v ten moment můžu do HTML kódu článku vlepit cokoliv.

Jeden blbě napsanej skript či obrázky pod horší kompresí udělají horší rotyku.
Pokud nám sem někdo dá k vyjádření tyto věci, tak mu také budou zkritizovány.
Také bys mohl u těch jiných případů říct „no a co, že tam má čtyřmegový obrázek s třímegovým EXIFem, třeba má vedle něj hodinové fullHD video a obrázek je proti tomu nic“… kontext většinou neznáme. Předpokládáme, že chce nejlepší řešení. Nemá smysl lobovat za cokoliv podřadnějšího.

To je nějaký nový styl / směrnice, ptát se každého jestli kvůli ptané věci tahá jQuery?
Mohl bych se zeptat, proč ti to tak najednou začalo vadit, ale oba víme, že nejde o nic nového, ani z jedné strany :-)
jakre
Profil
Tomášeek:
Děkuji za příklad. Co se týče jQuery, již ho využívám například pro animace v mobilním menu nebo ke skrývání lišty informující o využívání cookies.


Chamurappi:
Bereš text z elementu a dáváš ho neošetřeně dovnitř HTML kódu.
Děkuji za poznámku. Ačkoli texty přidávám z Wordpresového vizuálního editoru a nepoužívám značky, pokusím se vyhledat kód, kterým bych text mohl ošetřit.
Casero
Profil
Chamurappi:
Spíš .length. Je dobré si zapamatovat, že v oblasti webových stránek je height jediné slovo končící na ht, všude jinde je th. (Jestli jsem teď na něco nezapomněl.)
Třeba ještě font-weight :)
Kcko
Profil
Chamurappi:
Pravděpodobně to nezaindexují vyhledávače, které by jinak mohly na kotvu odkázat přímo z výsledku.
Nevnímám jako podstatnou věc, je to zaměřeno na rychlou orientaci v delším textu, nikoli na nějakou provázanost s vyhledáváním v Googlu či jiném vyhledávači.

Výstup z WYSIWYGu stejně musí obvykle projít nějakou kontrolou nebo přežvýkáním. V nejhorším případě, pokud opravdu nejde použít server-side řešení, bych upravil to javascriptové ukládání z WYSIWYGu, v ten moment můžu do HTML kódu článku vlepit cokoliv.
Modifikace wysiwyg editoru (TinyMce / CKeditor) bude určitě složitější a časově náročnější než napsat několik řádků v JS / jQuery někde stranou.

Pokud nám sem někdo dá k vyjádření tyto věci, tak mu také budou zkritizovány.
Také bys mohl u těch jiných případů říct „no a co, že tam má čtyřmegový obrázek s třímegovým EXIFem, třeba má vedle něj hodinové fullHD video a obrázek je proti tomu nic“… kontext většinou neznáme. Předpokládáme, že chce nejlepší řešení. Nemá smysl lobovat za cokoliv podřadnějšího.
Dostáváme se do absurdní roviny, on tady snad chtěl kritizovat / poučovat / debatovat o tom jestli přiložit jQuery knihovnu je problém? Z toho dělá problém akorát několik zdejších jedinců a opakovaně a bohužel se toho chytají už skoro všichni bez toho aniž by u toho přemýšleli.

Mohl bych se zeptat, proč ti to tak najednou začalo vadit, ale oba víme, že nejde o nic nového, ani z jedné strany :-)
Vadí mi to vždy, možná jsem se včera špatně vyspal nebo jsem to viděl u člověka, který to ještě nikdy nenapsal a chytá móresy od jiných, tak jsem se musel vyjádřit ... ;]

Upřímně ted v době rychlých internetů a velmi dynamických a náročných stránek mi jakékoliv hejtování nad používáním velikostně nicotné knihovny přijde úsměvné, ale zapomínám, že plaveme v českém rybníčku, kde se vždycky bude vyvalovat nějaký zapšklý přestárlý kapr s předpotopními názory ... :) (nebrat osobně, není mířeno na konkrétní osobu).
pcmanik
Profil
Kcko:
Upřímně ted v době rychlých internetů a velmi dynamických a náročných stránek mi jakékoliv hejtování nad používáním velikostně nicotné knihovny přijde úsměvné, ale zapomínám, že plaveme v českém rybníčku, kde se vždycky bude vyvalovat nějaký zapšklý přestárlý kapr s předpotopními názory

Rýchly internet na mobile je naozaj radosť najmä keď vývojári podobný tebe použijú na stránke množstvo knižníc, pluginov a ajaxu. Vtedy človek pozerá na bielu stránku celkom dlho, prípadne mu poskakuje ako sa AJAX-ové requesty dokončujú.

A skúšal si si niekedy ten super moderný dynamický a náročný web pustiť na nejakom slabšom Androide? Potom to aj tak vyzerá... A pritom výkonu je na to viac než dosť.

Vedieť programovať teda aj v čistom JS mi vôbec nepripadá ako predpotopný názor, práveže mne sa nepáčia tie supermoderné názory dnešných programátorov, že načo by vôbec písali nejaký kód keď na všetko môžu použiť nejakú knižnicu / plugin. Potom sme sa sa posunuli do doby keď nové programy / stránky sú na 10x výkonnejších strojoch pomalšie ako ich staršie verzie v minulosti na slabšom hw.

to každý řeší jako by to bylo to nejhorší stáhnout si zminifikovaný soubor z CDN-ky, který má kolik, 100-150kB?
CDN môže vypadnúť a čo potom návštevníci nebudú kvôli tomu mať prístup k súborom?
Chamurappi
Profil
Reaguji na jakreho:
Ačkoli texty přidávám z Wordpresového vizuálního editoru a nepoužívám značky
Stačí, abys je v textu napsal. Kdybys měl v kódu třeba <h3>&lt;b&gt;konto</h3>, tak tvůj skript vygeneruje tučné konto, protože vezme viditelný prostý text <b>konto a vlepí ho jako HTML do obsahu.

pokusím se vyhledat kód, kterým bych text mohl ošetřit
Neber .text(), ale .html().


Reaguji na Casera:
Já tušil, že jsem na něco zapomněl :-)
Ale to už je snad všechno, jen height a font-weight


Reaguji na Kcka:
je to zaměřeno na rychlou orientaci v delším textu, nikoli na nějakou provázanost s vyhledáváním v Googlu či jiném vyhledávači
To je jen spekulace, jakre nic takového nenaznačil. Lidi mimochodem na podobné odkazy moc neklikají (ale čtou je, takže jako souhrn obsahu se to může hodit).

Modifikace wysiwyg editoru (TinyMce / CKeditor) bude určitě složitější a časově náročnější
Bude, ale ne o moc. Stačí zkopírovat ten skript v prvním příspěvku, zkrátit ho (aby negeneroval skutečné elementy, ale jen kód) a navěsit na onsubmit. A pak ještě při zpětném načítání před inicializací editoru tenhle kus kódu zase vyhodit. Není to zase o tolik pracnější.

on tady snad chtěl kritizovat / poučovat / debatovat o tom jestli přiložit jQuery knihovnu je problém?
Vypadá to, že ty. Jedna drobná zmínka v závorce je nic proti tomu, co se tu rozjelo.

Upřímně ted v době rychlých internetů a velmi dynamických a náročných stránek
Různí lidé chodí na různé stránky, to se nijak nemění. Možná by ses divil, jak ohromné rozdíly jsou i mezi velkými českými weby v závislosti na jejich náročnosti.
Spokojíš-li se jen s omezenou množinou uživatelů, můžeš se jakýmkoliv připomínkám smát. Vesměs každý web je pro někoho dokonalý… někdy pro většinu lidí, jindy pro menšinu, občas jen pro svého tvůrce. Měřil jsi vliv různých faktorů na návštěvnost, nebo je tvým jediným měřítkem doba? Máš tvrdá data, nebo jen uklidňující pocity?

ale zapomínám, že plaveme v českém rybníčku, kde se vždycky bude vyvalovat nějaký zapšklý přestárlý kapr s předpotopními názory ... :)
To jsem mnoho let slýchával i v debatách o XHTML. Povrchní povšechná hodnocení odborných názorů jsou v této branži naprosto zbytečná :-)
jakre
Profil
Chamurappi:
Do kódu jsem implementoval podmínku, kterou mi napověděl [#5] Tomášeek. Radíš mi, abych změnil .text() na .html(), čímž se rozbije HTML výstup.

Přikládám ukázku:
    if ($(".inner h3").length > 0) {

        
        var ToC = "<div id='toc'><div class='layout'>" + "<h3>Obsah</h3>" + "<ul>";
 
        var newLine,
            el,
            title,
            link;
 
        $(".inner h3").each(function() {
 
            el = $(this);
            title = el.html();
            link = "#" + el.attr("id");
 
            newLine = "<li>" + "<a href='" + link + "'>" + title + "</a>" + "</li>";
 
            ToC += newLine;
 
        });
 
        ToC += "</ul>" + "<div></div>";
 
        $(".inner").prepend(ToC);
        
   
    }


Výstup JS výše je následující HTML kód:
  <div id="toc">
    <div class="layout">
      <h3>Obsah</h3>
        <ul><li><a href="#nadpis"></a><a href="#nadpis" style="display:none">#</a>Nadpis</li></ul><div></div>
    </div>
  </div>
Kcko
Profil
[ jakre
Podívej se jak jsem vyřešil já TOC na jednom starším webu www.direktreal.com/o-spolecnosti

    var html   = '';
    var indent = '';
    var style  = '';
    $("#onas").find("h2, h3, h4, h5").each(function(index){

        var $this = $(this);
        var tagName = $this[0].tagName;
        $this[0].id = 'h' + index;

        indent = tagName.substring(1);


        html += '<li class="indent'+indent+'"><a href="#h'+index+'">'+$this.text()+'</a></li>';


    });
Chamurappi
Profil
Reaguji na jakreho:
Radíš mi, abych změnil .text() na .html(), čímž se rozbije HTML výstup.
On se nerozbije, jen se přebere HTML z jednoho místa a dá se na druhé. Nedojde tam k interpretaci ničeho, co už nebylo interpretované v nadpisu.


Reaguji na Kcka:
To má stejnou chybu jako původní jakreho kód – bere to text a vkládá ho do innerHTML. V době rychlých internetů už vůbec nehrozí, že někdo napíše do nadpisu menšítko následované písmenem? :-)
Kdyby se podobně neopatrné zpracování pustilo i na vstup od návštěvníka (třeba na nějaké nadpisy komentářů), vznikla by tím XSS díra.
Kcko
Profil
Chamurappi
Ta poznámka s rychlým internetem je snad pod tvojí úroveň ne? >;]
Kdyby byly ryby raci, bylo tu snad řečeno někde něco takového? >;]
Oeskejpovat se to dá poměrně snadno ne? ;-)

Pěkný víkend.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: