Jquery Selecting
Question
I have started to learn the fundamentals of Jquery and I've wanted to ask a question about last-child selector. In code I can select the first p element in body with ":first-child" but I can't select the last p element in body with ":last-child". It works with ":last" but how can I select the last p element if I want to select it with ":last-child"?
The code is here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<p>Paragraph 1</p>
<p class="p2" >Paragraph 2</p>
<p id="p3">Paragraph 3</p>
<script>
document.title = "Selectors";
$("p:first-child").html("First child of Body");
$("p:last-child").html("Last child of Body");
</script>
</body>
</html>
Also, I've thought that it was because of script tag's location and moved it between head and body tags like that:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<script>
document.title = "Selectors";
$(document).ready(function(){
$("p:first-child").html("First child of Body");
$("p:last-child").html("Last child of Body");
})
</script>
<body>
<p>Paragraph 1</p>
<p class="p2" >Paragraph 2</p>
<p id="p3">Paragraph 3</p>
</body>
</html>
But It hasn't worked again.
1 answers
solution1
0 2021-10-21 08:35:26
...but how can I select the last p element if I want to select it with ":last-child"?
Your code would do that, but your script placement is incorrect, and when the browser fixes it (by moving it to body ), it messes up either your p:first-child or p:last-child selector. ( script elements cannot be directly children of html , they have to be in head or body [as direct children or as descendant elements].)
It's important to understand what :last-child actually does: :last-child means "is the last child in the parent," not "the last of the elements matching other parts of this selector." (That's what jQuery's pseudo-selector :last does.) So p:last-child means "select an element if it's a p element and it's the last child in its parent." If there's a script tag after it (because it was relocated by the browser), then the last p in your document fails the :last-child test (it's not the last child in its parent). (And similar for :first-child .)
If you had your script inside head (so it's not in the way of the p elements being the first and last elements in body ), your code would work:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Last Child</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
document.title = "Selectors";
$(document).ready(function(){
$("p:first-child").html("First child of Body");
$("p:last-child").html("Last child of Body");
})
</script>
</head>
<body>
<p>Paragraph 1</p>
<p class="p2" >Paragraph 2</p>
<p id="p3">Paragraph 3</p>
</body>
</html>
Or if the paragraphs were in a different container so we didn't care that the script tag was in the body , as in this Stack Snippet, it would also work:
<div> <p>Paragraph 1</p> <p class="p2" >Paragraph 2</p> <p id="p3">Paragraph 3</p> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> document.title = "Selectors"; $(document).ready(function(){ $("p:first-child").html("First child of parent"); $("p:last-child").html("Last child of parent"); }) </script>
I don't recommend putting undeferred scripts (like the one above including jQuery) in the head , it delays loading and rendering the HTML. I've only done it above to show that your p:first-child and p:last-child work if the paragraph elements are the first and last children of body (or of their parent).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.