Question

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

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>

编辑：输出我想提醒像：

这样的值

    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;
 });

Answer 1

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

$('.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()。

Answer 2

根据你的功能

alert($(this).children('span.feeditemtext.cxfeeditemtext').html());

这是在第一个div中给出span的文本值，它的类是cxfeeditem feeditem

对于第二个div，span不存在，所以null。

jquery选择带有名称的children标签

2 个答案: