¿Cómo encontrar todos los enlaces con un atributo hreflang usando jQuery?

En este artículo, aprenderemos a encontrar todos los enlaces con un atributo hreflang . El hreflang es un atributo que le dice a los motores de búsqueda la relación entre páginas en diferentes idiomas en tu sitio web.

Puede utilizar este atributo de las tres formas siguientes.

  • Como enlace en el encabezado HTML de la página (<head>).
  • En el encabezado HTTP (ejemplos de PDF)
  • En el mapa del sitio XML

Puede encontrar todos los enlaces con un atributo hreflang en su página utilizando el selector de atributosContainsPrefix .

selector de atributoContainsPrefix : este selector se utiliza para seleccionar elementos que tienen el atributo especificado con un valor igual a una string dada o que comienza con esa string.

Sintaxis:

jQuery( "[attribute|='value']" )

$( "a[hreflang|='en']" ) 

Ejemplo 1: En los siguientes ejemplos, primero encontramos el hreflang y luego lo resaltamos usando las propiedades CSS. El atributo hreflang con un valor ‘en’ se resalta con el borde punteado rojo.

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
  a {
    display: inline-block;
  }
  </style>
  <script src=
"https://code.jquery.com/jquery-3.5.0.js">
  </script>
</head>
<body>
  <h2 style="color:green">GeeksforGeeks</h2>
  <a href="example.html" hreflang="en">GFG</a>
  <a href="example.html" hreflang="en-UK">
     Computer Science
  </a>
  <a href="example.html" hreflang="english">
     will not be outlined
  </a>
   
  <script>
    $( "a[hreflang|='en']" )
    .css( "border", "3px dotted red" );
  </script>
   
</body>
</html>

Producción:

href lang = es

Ejemplo 2: 

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
  a {
    display: inline-block;
  }
  </style>
  <script src=
"https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
  <h2 style="color:green">GeeksforGeeks</h2>
  <a href="example.html" hreflang="en">Database</a>
  <a href="example.html" hreflang="en-UK">
    Computer Networks
  </a>
  <a href="example.html" hreflang="english">
    will not be outlined
  </a>
   
  <script>
    $( "a[hreflang|='en']" )
    .css( "border", "3px solid green" );
  </script>
   
</body>
</html>

Producción:

hreflag=es imagen2

Publicación traducida automáticamente

Artículo escrito por pall58183 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *