Hjälp med javascript - dölj en viss förekomst av span-tagg

Trädvy Permalänk
Medlem
Registrerad
Nov 2012

Hjälp med javascript - dölj en viss förekomst av span-tagg

Hej!

På min sida finns förekomster av följande rad:

<span class="amount">1 image</span>

Kan någon hjälpa mig med en function som tar bort eller döljer förekomsten av exakt ovanstående?

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Okt 2005

Är nästan alltid bättre att använda <div> istället för <span> för detta ändamål. Sen kan jag tipsa om sökning på stackoverflow, där finns svaret till det mesta.

https://stackoverflow.com/questions/7129305/java-script-funct...

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jan 2010

Ska du bara dölja dom, alla med den klassen?

function hideSpan(){ var elements = document.getElementsByClassName("amount") for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image"){ elements[i].style.display = "none"; } } }

Bärbar: Macbook Pro 13" Retina Mid-2014

Trädvy Permalänk
Medlem
Registrerad
Nov 2012

@3m0l tack för tipset, men dessvärre är sidan redan byggd på det viset att det är <span> som används.

@Sonywalk tack, men det är bara när den innehåller texten "1 image" som den ska bort. I andra fall står det i plural, tex 4 images, och då vill jag behålla den.

Trädvy Permalänk
Testpilot, Moderator
Plats
Norrköping
Registrerad
Sep 2002
Skrivet av Haider of Sweden:

det är bara när den innehåller texten "1 image" som den ska bort. I andra fall står det i plural, tex 4 images, och då vill jag behålla den.

Lägg till en liten if-sats och jämför med hjälp av innerHTML:

function hideSpan(){ var elements = document.getElementsByClassName("amount") for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image"){ elements[i].style.display = "none"; } } }

Kolla gärna in min RGB-LED-ljusstake i galleriet
[Gigabyte GA-Z97MX-Gaming 5][Intel Core i5 4690K][Corsair XMS3 8GB][Gigabyte GeForce GTX 970 G1 Gaming]

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jan 2010
Skrivet av hunden:

Lägg till en liten if-sats och jämför med hjälp av innerHTML:

function hideSpan(){ var elements = document.getElementsByClassName("amount") for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image"){ elements[i].style.display = "none"; } } }

Aaaaw, ändrade mitt så hade du skrivit när jag sparat Haha

Bärbar: Macbook Pro 13" Retina Mid-2014

Trädvy Permalänk
Entusiast
Testpilot
Plats
Chalmers
Registrerad
Aug 2011
Skrivet av Haider of Sweden:

Hej!

På min sida finns förekomster av följande rad:

<span class="amount">1 image</span>

Kan någon hjälpa mig med en function som tar bort eller döljer förekomsten av exakt ovanstående?

Skrivet av Haider of Sweden:

@3m0l tack för tipset, men dessvärre är sidan redan byggd på det viset att det är <span> som används.

@Sonywalk tack, men det är bara när den innehåller texten "1 image" som den ska bort. I andra fall står det i plural, tex 4 images, och då vill jag behålla den.

Så här skulle man kunna göra:

function hide(element) { element.style.display = "none"; } const SELECTOR_AMOUNT = ".amount"; const REGEX_ONE_IMAGE = /^1 image$/; const amountElements = document.querySelectorAll(SELECTOR_AMOUNT); const oneImageElements = amountElements.filter(element => REGEX_ONE_IMAGE.test(element.textContent)); oneImageElements.forEach(hide);

5930K • Corsair DP 32 GiB • EVGA GTX 980 • 2x Swift PG278Q
Better SweClockersDisplayPort över USB-C

Köp processor för framtiden™, men inte grafikkort.

Trädvy Permalänk
Medlem
Registrerad
Nov 2012

@Sonywalk, @Hunden: jag förstår exakt vad den gör, men det händer dessvärre inget.
Se länken nedan där jag försökte dölja texten "15 images" (har ändrat i skriptet) utan framgång:
http://haider.se/portfolio/

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jan 2010
Skrivet av Haider of Sweden:

@Sonywalk, @Hunden: jag förstår exakt vad den gör, men det händer dessvärre inget.
Se länken nedan där jag försökte dölja texten "15 images" (har ändrat i skriptet) utan framgång:
http://haider.se/portfolio/

Kallar du på funktionen då?
Typ längst ner på sidan
.....

<script> function hideSpan(){ var elements = document.getElementsByClassName("amount") for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image"){ elements[i].style.display = "none"; } } } hideSpan(); </script> </body>

Bärbar: Macbook Pro 13" Retina Mid-2014

Trädvy Permalänk
Medlem
Registrerad
Nov 2012

Toppen, det funkade nu. Trodde att funktionen laddades automatiskt, men inser att jag tänkt fel.

Skulle jag kunna be om en sista ynnest?
Det finns en till tagg som behöver döljas, men den saknar class-namn

<span>0 images</span>

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Nov 2013

Måste det vara Javascript?
Jag hade personligen aldrig lagt in det eftersom man kan göra så mycket med CSS

.img-link figcaption {
display: none;
}

Detta funkar att köra!

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jan 2010
Skrivet av Haider of Sweden:

Toppen, det funkade nu. Trodde att funktionen laddades automatiskt, men inser att jag tänkt fel.

Skulle jag kunna be om en sista ynnest?
Det finns en till tagg som behöver döljas, men den saknar class-namn

<span>0 images</span>

Blir ju liknande.

Antar att det alltid kommer stå "0 images"?

function hideSpans(){ var elements = document.getElementsByTagName('span'); for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "0 image"){ elements[i].style.display = "none"; } } }

Ska du helt enkelt gömma alla spans som innehåller "0 image" eller "1 image" kan du slå ihop dom.

function hideSpans(){ var elements = document.getElementsByTagName('span'); for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image" || elements[i].innerHTML == "0 image" ){ elements[i].style.display = "none"; } } }

Kalla på den: hideSpans();

Den går genom att span-taggar, och dom som bara innehåller "0 image" eller "1 image" göms.

Bärbar: Macbook Pro 13" Retina Mid-2014

Trädvy Permalänk
Medlem
Registrerad
Nov 2012

@lolpold: det hänger på innehållet Javascript tycks vara enda sättet att pricka in rätt element och dölja det.

@Sonywalk Snyggt. Nu verkar det som om jag stött på ett hinder som vi kanske inte har kontroll över. Den förekomst av "0 images" finns i menyn. Om du håller musen över Portfolio kommer du se det till höger.
I Chrome kan jag inspektera och hitta förekomsten i koden, dock inte i View Page Source. Kanske skapas menyn på ett annat sätt varför vi inte kan komma åt den med javascript.

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jan 2010
Skrivet av Haider of Sweden:

@lolpold: det hänger på innehållet Javascript tycks vara enda sättet att pricka in rätt element och dölja det.

@Sonywalk Snyggt. Nu verkar det som om jag stött på ett hinder som vi kanske inte har kontroll över. Den förekomst av "0 images" finns i menyn. Om du håller musen över Portfolio kommer du se det till höger.
I Chrome kan jag inspektera och hitta förekomsten i koden, dock inte i View Page Source. Kanske skapas menyn på ett annat sätt varför vi inte kan komma åt den med javascript.

Ser direkt vad problemet är.
Javascript tar bort element med texten "0 image", i menyn står det "0 images"

function hideSpans(){ var elements = document.getElementsByTagName('span'); var remove = ["1 image", "0 image", "0 images"]; //Lägg till värden här for (var i = 0; i < elements.length; i++){ var innerhtml = elements[i].innerHTML; if(remove.indexOf(innerhtml) != -1){ elements[i].style.display = "none"; } } }

Nu gömmer den alla spans som innehåller nått av värdena i listan "remove".
"1 image", "0 image" och "0 images"

Bästa skulle ju självklart vara att ni löser så att dessa element inte genereras, eller är gömda direkt när de skapas

Bärbar: Macbook Pro 13" Retina Mid-2014

Trädvy Permalänk
Medlem
Registrerad
Nov 2012

Tack så mycket @Sonywalk och alla andra som hjälpte till.
Ni blev veckans hjältar för mig

Rörande menyn och hur den genereras så håller jag på o reder ut det med tillverkaren av mjukvaruutvecklaren.

En modifikation av det förra skriptet uppdaterades till att översätta texten "images" till "bilder", dock blev allt vitt. Någon aning om varför?

function hideSpans(){ var elements = document.getElementsByClassName("amount") for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image"){ elements[i].style.display = "none"; } else { elements[i].innerHTML = str.replace('images', 'bilder'); } } }

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jan 2010
Skrivet av Haider of Sweden:

Tack så mycket @Sonywalk och alla andra som hjälpte till.
Ni blev veckans hjältar för mig

Rörande menyn och hur den genereras så håller jag på o reder ut det med tillverkaren av mjukvaruutvecklaren.

En modifikation av det förra skriptet uppdaterades till att översätta texten "images" till "bilder", dock blev allt vitt. Någon aning om varför?

function hideSpans(){ var elements = document.getElementsByClassName("amount") for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image"){ elements[i].style.display = "none"; } else { elements[i].innerHTML = str.replace('images', 'bilder'); } } }

function hideSpans(){ var elements = document.getElementsByClassName("amount") for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image"){ elements[i].style.display = "none"; } else { elements[i].innerHTML = elements[i].innerHTML.replace('images', 'bilder'); } } }

?

Bärbar: Macbook Pro 13" Retina Mid-2014

Trädvy Permalänk
Medlem
Registrerad
Nov 2012

Right on!
Tack för hjälpen.

Trädvy Permalänk
Medlem
Registrerad
Okt 2011

Radera/utkommentera hellre renderingen utav detta element för att följa best practice.

Jag ansvarar för vad jag skriver, inte för vad du förstår.
Förlåt, jag hörde inte vad du tänkte säga.

Trädvy Permalänk
Entusiast
Testpilot
Plats
Chalmers
Registrerad
Aug 2011
Skrivet av Sonywalk:

function hideSpan(){ var elements = document.getElementsByClassName("amount") for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image"){ elements[i].style.display = "none"; } } }

Skrivet av hunden:

function hideSpan(){ var elements = document.getElementsByClassName("amount") for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image"){ elements[i].style.display = "none"; } } }

Skrivet av Sonywalk:

function hideSpans(){ var elements = document.getElementsByTagName('span'); var remove = ["1 image", "0 image", "0 images"]; //Lägg till värden här for (var i = 0; i < elements.length; i++){ var innerhtml = elements[i].innerHTML; if(remove.indexOf(innerhtml) != -1){ elements[i].style.display = "none"; } } }

Dold text

Får jag i all vänlighet föreslå att vi inte indirekt lär ut eller uppmuntrar användning av == och !=?

5930K • Corsair DP 32 GiB • EVGA GTX 980 • 2x Swift PG278Q
Better SweClockersDisplayPort över USB-C

Köp processor för framtiden™, men inte grafikkort.

Trädvy Permalänk
Testpilot, Moderator
Plats
Norrköping
Registrerad
Sep 2002
Skrivet av Alling:
Dold text

Får jag i all vänlighet föreslå att vi inte indirekt lär ut eller uppmuntrar användning av == och !=?

Menar du att jag borde använt === istället eller finns det bättre funktioner för strängjämförelser i Javascript kanske?

I PHP finns funktionen strpos som ger positionen av en sträng i en annan som jag har förstått ger bäst prestanda. Där måste man däremot använda den med === för att kunna skilja på position 0 som innebär att strängen hittades mot false som innebär att strängen inte hittades alls.

Kolla gärna in min RGB-LED-ljusstake i galleriet
[Gigabyte GA-Z97MX-Gaming 5][Intel Core i5 4690K][Corsair XMS3 8GB][Gigabyte GeForce GTX 970 G1 Gaming]

Trädvy Permalänk
Medlem
Registrerad
Jun 2017
Skrivet av hunden:

Menar du att jag borde använt === istället eller finns det bättre funktioner för strängjämförelser i Javascript kanske?

I PHP finns funktionen strpos som ger positionen av en sträng i en annan som jag har förstått ger bäst prestanda. Där måste man däremot använda den med === för att kunna skilja på position 0 som innebär att strängen hittades mot false som innebär att strängen inte hittades alls.

Vet faktiskt inte varför den stora massan JavaScript-utvecklare ända sedan början har använt och bidragit till att använda den dåliga varianten gentemot den avsedda varianten. Detta är säkerligen inte något som skribenten avser att påpeka till dig personligen, utan det har varit ett problem länge att folk som kodar JavaScript sprider det sättet att göra. Du kanske redan vet vad jag åsyftar, fast kan posta ändå till de som inte ännu vet.

Denna tabell sammanfattar väl ganska bra problemet med att använda ==:
http://dorey.github.io/JavaScript-Equality-Table/

Det går utmärkt att jämföra med == när man vet garanterat att typerna är samma. Fast under den premissen så ser jag inte syftet med att använda == överhuvudtaget. Tumregeln egentligen är att alltid använda === och !== jämt. Boken "JavaScript The Good Parts" tar upp denna poäng också i Appendix B.
http://bdcampbell.net/javascript/book/javascript_the_good_par...

Detta kallas type coercion för övrigt, https://stackoverflow.com/questions/19915688/what-exactly-is-...

Trädvy Permalänk
Entusiast
Testpilot
Plats
Chalmers
Registrerad
Aug 2011
Skrivet av hunden:

Menar du att jag borde använt === istället eller finns det bättre funktioner för strängjämförelser i Javascript kanske?

Menar att det i allmänhet är best practice att helt undvika == och != (utom möjligen i vissa specialfall), och att vi ska använda === och !== istället.

5930K • Corsair DP 32 GiB • EVGA GTX 980 • 2x Swift PG278Q
Better SweClockersDisplayPort över USB-C

Köp processor för framtiden™, men inte grafikkort.

Trädvy Permalänk
Testpilot, Moderator
Plats
Norrköping
Registrerad
Sep 2002
Skrivet av Alling:

Menar att det i allmänhet är best practice att helt undvika == och != (utom möjligen i vissa specialfall), och att vi ska använda === och !== istället.

Då är jag med, får väl erkänna att jag ofta slarvar med det på grund av gammal vana. Är det specifikt för just JavaScript att det ofta används fel? Jag gör ju på fel sätt i PHP med oftast.

Just när det kommer till strängjämförelser, är det best practice att använda === ? Det finns inte nån strängfunktion som egentligen anses vara bättre?

Skickades från m.sweclockers.com

Kolla gärna in min RGB-LED-ljusstake i galleriet
[Gigabyte GA-Z97MX-Gaming 5][Intel Core i5 4690K][Corsair XMS3 8GB][Gigabyte GeForce GTX 970 G1 Gaming]

Trädvy Permalänk
Medlem
Registrerad
Jun 2017
Skrivet av hunden:

Då är jag med, får väl erkänna att jag ofta slarvar med det på grund av gammal vana. Är det specifikt för just JavaScript att det ofta används fel? Jag gör ju på fel sätt i PHP med oftast.

Just när det kommer till strängjämförelser, är det best practice att använda === ? Det finns inte nån strängfunktion som egentligen anses vara bättre?

Skickades från m.sweclockers.com

Vågar inte uttala mig om alla språk, fast PHP åtminstone som du nämner har samma dilemma också.

Antar att du syftar på scenariot som där man i Java behöver använda metoden .equals() för annars jämför den referenser snarare snarare än vanliga värden. Det är annorlunda i JavaScript då strängarna är primitiva typer snarare än objekt.

Fast det finns däremot en inbyggd klass i JavaScript också som heter String. Provade lite i konsolen och såg att det är samma som i Java där:

new String("str") === new String("str") new String("str") == new String("str")

Båda två ger false.
I detta fall måste man använda valueOf för att jämföra objektens innehåll. Jag vet inte vilka scenarion man hellre använder String än den vanliga primitiva strängtypen i JavaScript dock.

Trädvy Permalänk
Entusiast
Testpilot
Plats
Chalmers
Registrerad
Aug 2011
Skrivet av MrDoggo:

Fast det finns däremot en inbyggd klass i JavaScript också som heter String. Provade lite i konsolen och såg att det är samma som i Java där:

new String("str") === new String("str") new String("str") == new String("str")

Båda två ger false.
I detta fall måste man använda valueOf för att jämföra objektens innehåll. Jag vet inte vilka scenarion man hellre använder String än den vanliga primitiva strängtypen i JavaScript dock.

Jag tror att den generella rekommendationen är att inte använda String för att skapa strängar alls, utan att hålla sig till vanliga primitiva strängar.

En primitiv sträng är väsensskild från ett String-objekt. String returnerar ett objekt när den används som en konstruktor (dvs med new), men en primitiv sträng annars:

"hej" === new String("hej"); // false "hej" === String("hej"); // true "hej" instanceof String; // false new String("hej") instanceof String; // true typeof "hej"; // "string" typeof new String("hej"); // "object"

Jag använder aldrig varken String("hej") eller new String("hej").

5930K • Corsair DP 32 GiB • EVGA GTX 980 • 2x Swift PG278Q
Better SweClockersDisplayPort över USB-C

Köp processor för framtiden™, men inte grafikkort.

Trädvy Permalänk
Testpilot, Moderator
Plats
Norrköping
Registrerad
Sep 2002
Skrivet av MrDoggo:

Antar att du syftar på scenariot som där man i Java behöver använda metoden .equals() för annars jämför den referenser snarare snarare än vanliga värden. Det är annorlunda i JavaScript då strängarna är primitiva typer snarare än objekt.

Nej jag syftar på den vanliga strängtypen i JavaScript, som jag nu lärde mig kallas primitiv.
Tänkte bara på om jag missat nått smartare/mer effektivt sätt att jämföra på, med en funktion då exempelvis, men jag har nog blandat ihop det med nått annat

Kolla gärna in min RGB-LED-ljusstake i galleriet
[Gigabyte GA-Z97MX-Gaming 5][Intel Core i5 4690K][Corsair XMS3 8GB][Gigabyte GeForce GTX 970 G1 Gaming]

Trädvy Permalänk
Entusiast
Testpilot
Plats
Chalmers
Registrerad
Aug 2011
Skrivet av hunden:

Nej jag syftar på den vanliga strängtypen i JavaScript, som jag nu lärde mig kallas primitiv.
Tänkte bara på om jag missat nått smartare/mer effektivt sätt att jämföra på, med en funktion då exempelvis, men jag har nog blandat ihop det med nått annat

Om man bara vill avgöra om två primitiva strängar är lika – alltså består av samma text – använder man ===. Mer generella checkar kan göras med regular expressions (regex):

// Matcha en sträng som består av valfritt nollskilt antal siffror, sedan ett mellanslag, sedan "image" och slutligen ett valfritt "s": const REGEX = /^\d+ images?$/; REGEX.test("0 image"); // true REGEX.test("0 images"); // true REGEX.test("1 image"); // true REGEX.test("1 images"); // true REGEX.test("2 image"); // true REGEX.test("2 images"); // true REGEX.test("007 image"); // true REGEX.test("007 images"); // true REGEX.test("45 image"); // true REGEX.test("45 images"); // true REGEX.test(" 45 images"); // false REGEX.test("almost 45 images"); // false REGEX.test("images"); // false REGEX.test("45"); // false

Och om vi inte vill matcha felaktig grammatik eller inledande nollor:

// Matcha en sträng som består av något av följande: // - en siffra som ej är 1, sedan mellanslag och sedan "images" // - en siffra som ej är 0, sedan valfritt nollskilt antal siffror, sedan ett mellanslag och sedan "images" // - "1 image" const REGEX = /^(([02-9]|[1-9]\d+) images|1 image)$/; REGEX.test("0 image"); // false REGEX.test("0 images"); // true REGEX.test("1 image"); // true REGEX.test("1 images"); // false REGEX.test("2 image"); // false REGEX.test("2 images"); // true REGEX.test("007 image"); // false REGEX.test("007 images"); // false REGEX.test("45 image"); // false REGEX.test("45 images"); // true

Att skriva regex är en konst och det går säkert att göra det bättre och snyggare än jag gjort här.

5930K • Corsair DP 32 GiB • EVGA GTX 980 • 2x Swift PG278Q
Better SweClockersDisplayPort över USB-C

Köp processor för framtiden™, men inte grafikkort.