javascript - jQuery选择名称的子标签

在下面显示的html中，我的主div为cxfeeditem feeditem和there are many divs，具有相同的类名和结构。我的问题是所有以类名cxfeeditem feeditem开头的div，如何获取子代的值，

1.类名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>

编辑：输出我想提醒值，如：

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

我尝试了以下操作，但返回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;
 });

最佳答案

我能看到的最简单的方法是：

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

JS Fiddle demo。

filter()用于确保我们不会访问相同的.cxfeeditem和.feeditem类的元素，这些元素是这些类的最外层元素的子代。感觉有些混乱，但是鉴于您想要的输出，这似乎是最好的方法。

之后，我们只需记录每个尚未过滤掉的（直接）子元素的空白trim() -ed text()。



根据OP在以下评论中提出的问题进行了编辑：


  如果我想添加一个子类名称并且不想考虑所有标签怎么办？例如，如果我只需要a.feeditemtimestamp和span.feeditemtext.cxfeeditemtext的值


在这种情况下，您可以使用第二个呼叫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。

或者，您可以使用find()（并省略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。

参考文献：


jQuery的：

children()。
each()。
filter()。
find()。
parents()。
text()。

普通JavaScript：

length。
trim()。