Tengo el siguiente código con Jquery.
var myHTML = $(`<a href="/wiki/Indian_Rebellion_of_1857" title="Indian Rebellion of 1857">Indian Rebellion of 1857</a>: Indian rebels seize Delhi from the British.<sup id="cite_ref-11" class="reference"><a href="#cite_note-11">[11]</a></sup>`) var firstLinkText = myHTML.find("a:first").text() console.log(firstLinkText) // Output "[11]" No sé por qué no se selecciona el primer enlace <a> , pero ¿el último? ¿Algo mal en mi código, alguna solución?
var html = `<a href="/wiki/Indian_Rebellion_of_1857" title="Indian Rebellion of 1857">Indian Rebellion of 1857</a>: Indian rebels seize Delhi from the British.<sup id="cite_ref-11" class="reference"><a href="#cite_note-11">[11]</a></sup>` var myHTML = $(html) var firstLinkText = myHTML.find("a:first").text() console.log(firstLinkText) document.body.textContent = (html) document.write("<br><br>Output: " + firstLinkText) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>El problema se debe a que al usar find() le está diciendo a jQuery que busque el selector que proporciona dentro del elemento principal. Como el padre en sí es el elemento a , obviamente no encuentra nada.
Para arreglar esto, puedes usar filter() :
var $myHTML = $(`<a href="/wiki/Indian_Rebellion_of_1857" title="Indian Rebellion of 1857">Indian Rebellion of 1857</a>: Indian rebels seize Delhi from the British.<sup id="cite_ref-11" class="reference"><a href="#cite_note-11">[11]</a></sup>`) var firstLinkText = $myHTML.filter('a:first').text() console.log(firstLinkText) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>.find() solo busca coincidencias en los descendientes, no en los elementos de nivel superior de la colección. Por lo tanto, debe envolver el HTML en un <div> para que todo sea un descendiente.
var myHTML = $(`<div><a href="/wiki/Indian_Rebellion_of_1857" title="Indian Rebellion of 1857">Indian Rebellion of 1857</a>: Indian rebels seize Delhi from the British.<sup id="cite_ref-11" class="reference"><a href="#cite_note-11">[11]</a></sup>`) var firstLinkText = myHTML.find("a:first").text() console.log(firstLinkText) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Parece que la cadena html debe ser un solo elemento con niños.
Parece que no es posible usar :first colocando una cadena con dos etiquetas HTML sin un padre.
La solución a su problema puede ser envolver su html en cualquier etiqueta para buscar su elemento.
const html = `<a href="/wiki/Indian_Rebellion_of_1857" title="Indian Rebellion of 1857">Indian Rebellion of 1857</a>: Indian rebels seize Delhi from the British.<sup id="cite_ref-11" class="reference"><a href="#cite_note-11">[11]</a></sup>` var myHTML = $(`<span>${html}</span>`) var firstLinkText = myHTML.find("a:first").text() console.log(firstLinkText) // Output "Indian Rebellion of 1857" <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>¡Muy interesante y más rápido el método .filter() de la otra respuesta! Dejo mi respuesta como alternativa...