All geek questions in one place

First child does not select expected items

I am in a situation where I need to use .wrap and: first-child.

This is what I do:

<script>$("a").wrap("<div class='category-wrapper'></div>");</script> <script>$("div.category-wrapper:first-child").addClass("first");</script>

This should make the div.category wrapper out of the link, and then add the “first” class to every first div.category-wrapper.

Conclusion:

 <div class="category-wrapper"><a href="#">Test</a></div>

It's good! However, I cannot get the "first child" to work (he does not add the "first" class). If I use it somewhere else, it works, so I'm sure this is due to the dynamic rendering of the previous item.

Output Example:

 <div class="category-wrapper"><a href="#">Test #1</a></div> <div class="category-wrapper"><a href="#">Test #2</a></div> <div class="category-wrapper"><a href="#">Test #3</a></div> <div class="category-wrapper"><a href="#">Test #4</a></div>

Required Conclusion:

 <div class="category-wrapper first"><a href="#">Test #1</a></div> <div class="category-wrapper"><a href="#">Test #2</a></div> <div class="category-wrapper"><a href="#">Test #3</a></div> <div class="category-wrapper"><a href="#">Test #4</a></div>

However, I cannot get it to work.

+4
source share
4 answers

first-child depends on the context of the element you are trying to select: "Description: Selects all elements that are the first descendant of their parent." .

Check this:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>First Child Exp</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <style type="text/css"> .first { background-color: red; } </style> </head> <body> <h1>First Child Exp</h1> <div> <div class="category-wrapper"><a href="#">Test</a></div> </div> <script type="text/javascript"> $("div.category-wrapper:first-child").addClass("first"); </script> </body> </html>

If you delete a div without a class, then div class = "category-wrapper" will be the second child of the parent, since h1 will be the first child of the body. If you remove h1, div class = "category-wrapper" will again become the first child of the body.

So, the parent element should surround all elements div class = "category-wrapper".

+4
source

Have you tried $ ("div.category-wrapper a: first-child")?

+2
source

If you have something like this:

 <div> Hello there <span>Somethiing something</span> <a href='somewhere'>wrap me</a>

Then, when this <a> tag is wrapped, you get the following:

 <div> Hello there <span>Somethiing something</span> <div class='category-wrapper'><a href='somewhere'>wrap me</a></div>

This added the <div> not the first child of the containing <div> .

You may need to use ": first" instead of ": first-child". The two, of course, are not always interchangeable.

+2
source

try the following:

 $("a").wrap("<div class='category-wrapper'></div>"); $("div.category-wrapper:first").children().addClass('first');
0
source

Source: https://habr.com/ru/post/1313092/

More articles:


All Articles