javascript - jquery选择带有名称的子标签

Question

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

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

Answer 1

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

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

JS 小提琴演示。

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

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

---

针对 OP 在评论中提出的问题进行了编辑，如下：

如果我想添加一个子类名并且不想考虑所有标签怎么办？例如，如果我想要 onlya.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 小提琴演示。

或者您可以使用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 小提琴演示。

参考：

• jQuery：
  • children().
  • each().
  • filter().
  • find().
  • parents().
  • text().
• '普通' JavaScript：
  • length.
  • trim().

Answer 2

根据你的功能

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

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

对于第二个 div，跨度不存在，所以为空。