0

buenas tardes tengo el problema que indiqué en el título. este es mi codigo:

<script>
        $(document).ready(function(){
          $('body').click(function(){
            var x = $(this).attr('href')
            alert(x)
          })
        })
    </script>

tengo varios enlaces en un sitio (quiero capturar si se puede todos los links o href) y quiero capturarlos el código que mostré en la parte de arriba me captura únicamente un link que yo modifiqué y yo mismo le agregué el href, pero en el sitio de wordpress me aparece en la parte donde están los menús una casilla de "URL" Allí se encuentran personalizados los links, pero no puedo capturar esos, cómo puedo hacer para capturarlos?

4
  • ¿Lo que quieres es capturar todos los href que hay dentro del body? ¿Desde que evento quieres lanzar dicha captura? Pulsa en editar para aclarar la pregunta, pues esos dos puntos no se entienden.
    – A. Cedano
    Commented el 16 feb. 2020 a las 21:10
  • - Si, quiero capturar todos los href que hay dentro del body, incluso si hubieran en un footer o algo más también quiero capturarlos, - El evento con el que los quiero capturar es con el Click Commented el 16 feb. 2020 a las 21:32
  • ¿Con el click sobre dónde? Tienes que especificar eso.
    – A. Cedano
    Commented el 16 feb. 2020 a las 21:34
  • Tengo varios enlaces como mencioné antes incluso son de WordPress y lo que quiero es que al darle click en esos enlaces, me dé la url o href que poseen esos enlaces y los quiero capturar cada vez que se dé click Commented el 16 feb. 2020 a las 21:40

2 respuestas 2

2

No te funciona porque no escribes tu codigo correctamente, body no es un enlace y no consta del atributo href, si se lo pones no hace absolutamente nada.

debes utilizar document.querySelectorAll para obtener los enlaces y poder agregarles el evento click a cada uno, aqui el ejemplo, deberas complementarlo con validaciones y mas funcionalidad

const links = document.querySelectorAll('a');
const hrefs = [];
if (links) {
  links.forEach((item) => {
    item.addEventListener('click', (event) => {
      hrefs.push(event.target.href);
      console.log('hrefs: ', hrefs);
    });
  });
}
 <ul>
    <li><a href="#link-01">link-01</a></li>
    <li><a href="#link-02">link-02</a></li>
    <li><a href="#link-03">link-03</a></li>
    <li><a href="#link-04">link-04</a></li>
    <li><a href="#link-05">link-05</a></li>
    <li><a href="#link-06">link-06</a></li>
    <li><a href="#link-07">link-07</a></li>
    <li><a href="#link-08">link-08</a></li>
    <li><a href="#link-09">link-09</a></li>
    <li><a href="#link-10">link-10</a></li>
    <li><a href="#link-11">link-11</a></li>
    <li><a href="#link-12">link-12</a></li>
    <li><a href="#link-13">link-13</a></li>
    <li><a href="#link-14">link-14</a></li>
    <li><a href="#link-15">link-15</a></li>
    <li><a href="#link-16">link-16</a></li>
    <li><a href="#link-17">link-17</a></li>
    <li><a href="#link-18">link-18</a></li>
    <li><a href="#link-19">link-19</a></li>
    <li><a href="#link-20">link-20</a></li>
  </ul>

1

jQuery

En jQuery puedes usar un selector de elemento, en este caso $( "body a" ). Esto seleccionará todos los elementos con la etiqueta a dentro del body. Luego puedes recorrer cada elemento para modificarlo o leer cualquiera de sus propiedades.

$("body a").each(function(link) {
  console.log(`ID: ${$( this ).prop("id")} URL: ${$( this ).prop("href")}`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>

  <div>
    <p><a id="body1" href="https://www.google.com">Link 1 body</a></p>
    <p><a id="body2" href="https://www.stackoverflow.com">Link 2 body</a></p>
  </div>

  <footer>
    <p><a id="footer1" href="https://www.google.com">Link 1 footer</a></p>
    <p><a id="footer2" href="https://www.stackoverflow.com">Link 2 footer</a></p>
  </footer>

</body>

Javascript puro (moderno)

En navegadores modernos puedes lograrlo simplemente con querySelectorAll. Por ejemplo haciendo esto tendrías en allLinks un array con todos los links del DOM y todas sus propiedades:

var allLinks = document.querySelectorAll('a');

Luego puedes recorrerlo con un bucle para leerlos, modificarlos o lo que quieras.

var allLinks = document.querySelectorAll('body a');
allLinks.forEach(function(link) {
  console.log(`ID: ${link.id} URL: ${link.href}`);
});
<body>
  <div>
    <p><a id="body1" href="https://www.google.com">Link 1 body</a></p>
    <p><a id="body2" href="https://www.stackoverflow.com">Link 2 body</a></p>
  </div>

  <footer>
    <p><a id="footer1" href="https://www.google.com">Link 1 footer</a></p>
    <p><a id="footer2" href="https://www.stackoverflow.com">Link 2 footer</a></p>
  </footer>
  
</body>

Javascript puro (menos moderno)

En navegadores más viejos, puedes reemplazar querySelectorAll por getElementsByTagName, sólo que aquí no te devuelve los elementos como nodos en sí mismos:

var allLinks = document.body.getElementsByTagName("a");
for(var i = 0; i< allLinks.length; i++){
  console.log(`ID: ${allLinks[i].id} URL: ${allLinks[i].href}`);
}
<body>

  <div>
    <p><a id="body1" href="https://www.google.com">Link 1 body</a></p>
    <p><a id="body2" href="https://www.stackoverflow.com">Link 2 body</a></p>
  </div>

  <footer>
    <p><a id="footer1" href="https://www.google.com">Link 1 footer</a></p>
    <p><a id="footer2" href="https://www.stackoverflow.com">Link 2 footer</a></p>
  </footer>
  
</body>

Puedes cualquiera de las opciones y adaptarla al listener o función donde quieras implementarlo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.