Home/ Questions/Q 860079
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T08:45:51+00:00

I’m in a situation in which I need to use .wrap and :first-child. This

  • 0

I’m in a situation in which I need to use .wrap and :first-child.

This is what I am doing:

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

This should render a div.category-wrapper outside a link and then add a “first” class to every first div.category-wrapper.

The output is: 

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

Which is good! However, I am not able to get the “first-child” to work (it doesn’t adds the “first” class). If I use it somewhere else it works so I am sure it’s something related to the dynamic rendering of the previous element.

Sample output would be: 

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

Desired output:

<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 am not able to make it work.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    first-child depends on the context of the element you’re trying to select: “Description: Selects all elements that are the first child of their parent.”.

    Check this out:

    <!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 the div with no class, then div class=”category-wrapper” will be the second child of it’s parent, since the h1 will be the first child of body. If you then delete the h1, div class=”category-wrapper” will again be the first child of body.

    So, a parent element must surround all of the div class=”category-wrapper” elements.

    • 0