I have the following code with 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]"
I don't know why the first link <a> is not getting selected but the last one? Anything wrong in my code, any fix?
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>The issue is because by using find() you're telling jQuery to look for the selector you provide within the parent element. As the parent itself is the a element, it obviously doesn't find anything.
To fix this you can instead use 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() only searches for matches in descendants, not the top-level elements in the collection. So you need to wrap the HTML in a <div> so everything is a descendant.
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>It seems that the html string must be a single element with children.
It seems that it is not possible to use a :first by placing a string with two HTML tags without a parent.
The solution to your problem can be to wrap your html in any tag in order to search for your element.
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>Very interesting and faster the .filter() method from the other answer! I leave my answer as an alternative...