Problem selecting class using jquery

Question

Hi everyone, I've been banging my head against a wall trying make this work for a while now. I'm trying to shorten the comment body to one line for compact comment preview. I'm using jquery .each function to go through each .cbody (comment body) in my threaded comment system and place it in the cshort div inside chead. It should work but i cant select the cshort class in the top line. Any help is very appreciated. As far as i can see my jquery should be this:

$('.cbody').each(function(Ind1){
      var str = $(this).text();
      $(this).parent().siblings('.chead').next('.cshort').html(str); 
    });
});

This is the html for the comment:

<ul>
<li>
<div id="23">
<a name="23">
</a>
<div class="chead">
<a href="#" class="unord">
<img src="images/plus.gif" border="0">
</a>
<a href="userinfo.php?user=muuuuuuuu">
<img src="include/avatar/n.jpg" border="0">
</a>
<span style="display: none;" class="uname">
usersname
</span>
&nbsp;,

<span class="cshort">
</span>
<span class="votes_up" id="votes_up23">
2
</span>
-
<span class="votes_down" id="votes_down23">
0
</span>
<span class="vote_buttons" id="vote_buttons23">
<a href="javascript:;" class="vote_up" id="23">
</a>
<a href="javascript:;" class="vote_down" id="23">
</a>
</span>
</div>
<div class="cbody">
<br>
The comment text funny lol
</div>
<a style="display: none;" href="#" class="reply" id="23">
Reply
</a>
<a style="display: none;" href="#21" class="cparent">
Parent
</a>
</div>
</li>
</ul>

Answer 1

the cbody's parent appears to have no siblings, so the bit

$(this).parent().siblings('.chead')

is not returning anything, you most likely want either

$(this).parent().find('.chead')

or

$(this).siblings('.chead')

to get most directly to the cshort, use

$(this).parent().find('.cshort')

Edit:

Your HTML's hierarchy looks like this:

ul
| li
| | div#23
| | | a
| | | div.chead
| | | div.cbody
| | | ...

• $(this) refers to the cbody
• $(this).parent() refers to div#23
• $(this).parent().siblings() returns all other child nodes of the li (empty in your sample code's case)
• $(this).siblings() refers to div.chead, and a few a elements

since chead is a sibling of cbody, the best way to select it is with

$(this).siblings('.chead')

Answer 2

Try changing this:

$(this).parent().siblings('.chead').next('.cshort').html(str);

to this:

$(this).siblings('.chead').children('.cshort').html(str);

.chead and .cbody are siblings, so you don't need to look at .cbody's parent. Also, .cshort is a child of .chead, so you look through .chead's children, not at its siblings (via .next).

Answer 3

Shouldn't that last method be append?

.html(str) will be replacing it each time, and you'll only end up with the last one.