What does this line of Jquery do?

Question

$(this).find("a[href^='/']")

I'm particularly interested in knowing this part "a[href^='/']"

Answer 1

jQuery uses CSS selectors. a[^='/'] will select all <a> whose href attribute starts with / which are children of whatever the this is.

See it in action:

$("ul").each(function () {
  $(this).find("a[href^='/']").addClass("selected");
});

.selected {
   background-color: lime;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><a href="http://www.google.com">Will not be selected</a></li>
    <li><a href="/example">Will be selected</a></li> 
</ul>

<ul>
    <li><a href="/example">Yep</a></li> 
    <li><a href="http://www.google.com">Nope</a></li>
</ul>

• jQuery documentation on starts with attribute selector: https://api.jquery.com/attribute-starts-with-selector/
• More on attribute selectors: https://developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors

Answer 2

This particular code is CSS Attribute Selector to find <a> elements with an href attribute value that starts with a /.

More here: https://api.jquery.com/attribute-starts-with-selector/

Answer 3

It looks for a link to the href beginning with /.