Jquery not finding links-CodePudding

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" ><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" ><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>

CodePudding user response：

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" ><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>

CodePudding user response：

.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" ><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>

CodePudding user response：

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" ><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...