4.2 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
bad87fee1348bd9aede08817	Nidificare un elemento di ancoraggio all'interno di un paragrafo	0	18244	nest-an-anchor-element-within-a-paragraph

--description--

Puoi annidare i link all'interno di altri elementi di testo.

<p>
  Here's a <a target="_blank" href="https://www.freecodecamp.org"> link to www.freecodecamp.org</a> for you to follow.
</p>

Andiamo a scomporre l'esempio. Il testo normale viene inserito nell'elemento p:

<p> Here's a ... for you to follow. </p>

Poi viene l'elemento anchor<a> (che richiede un tag di chiusura </a>):

<a> ... </a>

target è un attributo tag di ancoraggio che specifica dove aprire il collegamento. Il valore _blank specifica di aprire il collegamento in una nuova scheda. L' href è un attributo tag di ancoraggio che contiene l'indirizzo URL del collegamento:

<a href="https://www.freecodecamp.org" target="_blank"> ... </a>

Il testo, link to www.freecodecamp.org all'interno dell'elemento a si chiama testo di ancoraggio, e mostrerà il link sul quale cliccare:

<a href=" ... " target="...">link to freecodecamp.org</a>

L'output finale dell'esempio sarà simile a questo:

Here's a link to www.freecodecamp.org for you to follow.

--instructions--

Annida l'elemento a esistente all'interno di un nuovo elemento p. Non creare un nuovo elemento di ancoraggio. Il nuovo paragrafo dovrebbe contenere testo che dice View more cat photos, dove cat photos è un collegamento, e il resto è testo semplice.

--hints--

Dovresti avere un solo elemento a.

assert(
  $('a').length  === 1 
);

L'elemento a dovrebbe essere collegato a "https://www.freecatphotoapp.com".

assert(
  $('a[href="https://www.freecatphotoapp.com"]').length  === 1 
);

Il tuo elemento a dovrebbe avere il testo di ancoraggio: cat photos

assert(
  $('a')
    .text()
    .match(/cat\sphotos/gi)
);

Dovresti creare un elemento p. Ci dovrebbe essere almeno 3 tag p nel tuo codice HTML

assert($('p') && $('p').length > 2);

Il tuo elemento a dovrebbe essere annidato nel nuovo elemento p.

assert(
  $('a[href="https://www.freecatphotoapp.com"]').parent().is('p')
);

Il tuo elemento p dovrebbe avere il testo View more (con uno spazio dopo di esso).

assert(
  $('a[href="https://www.freecatphotoapp.com"]')
    .parent()
    .text()
    .match(/View\smore\s/gi)
);

Il tuo elemento a non dovrebbe contenere il testo View more.

assert(
  !$('a')
    .text()
    .match(/View\smore/gi)
);

Ognuno dei tuoi elementi p dovrebbe avere un tag di chiusura.

assert(
  code.match(/<\/p>/g) &&
    code.match(/<p/g) &&
    code.match(/<\/p>/g).length === code.match(/<p/g).length
);

Ognuno dei tuoi elementi a dovrebbe avere un tag di chiusura.

assert(
  code.match(/<\/a>/g) &&
    code.match(/<a/g) &&
    code.match(/<\/a>/g).length === code.match(/<a/g).length
);

--seed--

--seed-contents--

<h2>CatPhotoApp</h2>
<main>

  <a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>

  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>

--solutions--

<h2>CatPhotoApp</h2>
<main>
  <p>View more <a target="_blank" href="https://www.freecatphotoapp.com">cat photos</a></p>

  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>

4.2 KiB Raw Blame History