jquery - 检测子元素是否在父div开始后立即出现

我遇到了小麻烦。我有以下HTML代码

<div id="parentdiv">
        This is test immediately in a parent div, not within child element
        many more text comes.
        <p class="childelement">This is under child element</p>
        Another bunch of text also comes here
    </div>

类p tag的childelement可能在parentdiv中的任何位置出现一次或多次。我要做的就是检测以下两种情况之一：


检测childelement是否在父级启动后立即出现
div与否。
检测childelement之前是否有任何文本


我基本上想做的是，如果childelement满足点2，那么我将在此元素后添加margin-top样式，否则不行。

我试过的是

$('.childelement:gt(0)').css({'margin-top':'5pt'});

如果父div的开始标记后紧跟着childelement，则这对于父div中的所有childelement都适用。但是，如果我删除了第一次出现的childelement，则margin-top css将在第二个childelement中丢失，因为在删除了第一个元素之后，它的index becomes 0也就消失了。

只是一个提示对我来说就足够了。

任何帮助将是非常可贵的

最佳答案

您可以使用.filter()方法并读取元素的previousSibling属性，请注意，我已经使用$.trim()排除了没有可见字符的textNode，如果要包括这些节点，则可以删除方法。

$('#parentdiv .childelement:first-child').filter(function() {
    return this.previousSibling
           && $.trim(this.previousSibling.nodeValue).length;
}).css({'margin-top':'5pt'});

http://jsfiddle.net/Tcb4s/



@LoVeSmItH进行的更新：

$('#parentdiv .childelement:first-child').filter(function() {
     var sit=this.previousSibling && $.trim(this.previousSibling.nodeValue).length;
     if ($.trim(sit)!="") {
         return sit;
     } else {
        $('.childelement:gt(0)').css({'margin-top':'5pt'});
     }
}).css({'margin-top':'5pt'});

根据修改的建议：

var $child = $('#parentdiv .childelement'),
    $first = $child.filter(':first-child').filter(function() {
               return this.previousSibling
                      && $.trim(this.previousSibling.nodeValue).length;
             });

if ($first.length) $first.css({'margin-top':'5pt'});
else $child.not(':first').css({'margin-top':'5pt'});