ansaurus

Question

Jquery .wrap and first-child

Answer 1

+2 A:

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

mtwallet 2010-06-17 16:19:57

He wants the class to be added to the `<div>`, not the `<a>`.

Pointy 2010-06-17 16:20:43

Sorry, long day didn't read that correctly

mtwallet 2010-06-17 16:22:27

I've edited the question so you can check the desired output.

Johann 2010-06-17 16:40:05

I have just tried your code and it works fine I have uploaded an example at www.nicklansdell.com/stack/ look at it with firebug

mtwallet 2010-06-17 16:42:51

Thanks a lot for your sample code. However, I didn't took in considerating there were surrounding elements that were affecting this. Your code helped me anyways as a sample to organize mine since I was loading several scripts at the same time instead of just one with all the code in it!

Johann 2010-06-17 17:38:52

Answer 2

+1 A:

If you have something like this:

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

Then when that <a> tag is wrapped you'll have this:

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

That added <div> is not the first child of the containing <div>.

It might work for you to use ":first" instead of ":first-child". Those two are of course not always interchangeable.

Pointy 2010-06-17 16:54:55

Thanks for the sample code @Pointy. This works to understand the "big picture" of this issue!

Johann 2010-06-17 17:36:16

Answer 3

+4 A:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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"&gt;&lt;/script&gt;

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

KatieK 2010-06-17 16:56:03

Correct, @KatieK!

Pointy 2010-06-17 16:57:17

Awesome @KatieK . I was struggling with this but this is the best example and explanation for sure! Thanks!

Johann 2010-06-17 17:31:44

ansaurus

tags:

views:

answers:

Jquery .wrap and first-child

related questions