Question

In the below shown html i have this main div as cxfeeditem feeditem and there are many divs with the same class names and structure.My question is for all the divs starting with the class name cxfeeditem feeditem ,how to get values for the children,

1.with class name cxfeeditem feeditem

2.class=feeditemtimestamp

3.cxcomments feeditemcomments

4.cxfeeditem feeditem

 <div class="cxfeeditem feeditem">
   <span class="feeditemtext cxfeeditemtext">
      This is my blog
   </span>
   <a class="feeditemtimestamp">Yesterday 2:13PM</a>
   <div class="cxcomments feeditemcomments"> 
     These are my comments
   </div>
   <div class="cxfeeditem1 feeditem1">
     My comments for the comment
   </div>  

</div>

EDIT: Output i want to alert the values like:

    This is my blog
    Yesterday 2:13PM
    These are my comments
    My comments for the comment

I tried the following but it returns null:

$("div.cxfeeditem.feeditem").each(function() {
   alert($(this).children('span.feeditemtext.cxfeeditemtext').html());
   alert($(this).children('a.feeditemtimestamp').html());
   alert($(this).children('div.cxcomments.feeditemcomments').html());
   alert($(this).children('div.cxfeeditem.feeditem').html());
   break;
 });

Answer 1

The easiest way I could see is:

​$('.cxfeeditem.feeditem').filter(
    function(){
        return !$(this)
            .parents('.cxfeeditem.feeditem')
            .length​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​;
    }).children().each(
        function(){
            console.log($(this).text().trim());
        });​

JS Fiddle demo.

The filter() is used to ensure we’re not accessing the elements of the same .cxfeeditem and .feeditem classes that are children of the outer-most element of those classes. This feels a little messy, but given your desired output it seemed the best way.

After that we’re simply logging the white-space trim()-ed text() of each of the (direct) child elements that haven’t been filtered-out.

---

Edited in response to question from the OP in comments, below:

What if I want to add a children class name and I do not want to consider all tags; for example if I wanted the value of only a.feeditemtimestamp and span.feeditemtext.cxfeeditemtext

In that case you can either use a second call to filter():

$('.cxfeeditem.feeditem').filter(
    function() {
        return !$(this).parents('.cxfeeditem.feeditem').length;
    }).children().filter(
        function() {
            var that = $(this);
            return that.is('span.feeditemtext.cxfeeditemtext, a.feeditemtimestamp');
        }).each(        
            function() {
                console.log($(this).text().trim());
            });​

JS Fiddle demo.

Or you can use find() (and omit children()):

$('.cxfeeditem.feeditem').filter(
    function() {
        return !$(this).parents('.cxfeeditem.feeditem').length;
    }).find('> span.feeditemtext.cxfeeditemtext, > a.feeditemtimestamp').each( 
        function() {
            console.log($(this).text().trim());
        });​

JS Fiddle demo.

References:

• jQuery:
  • children().
  • each().
  • filter().
  • find().
  • parents().
  • text().
• ‘Plain’ JavaScript:
  • length.
  • trim().