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

Question

我遇到了小麻烦。我有以下 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 tagwith 类可能在 . 中的childelement任何地方出现一次或多次parentdiv。我要做的就是检测以下两种情况之一：-

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

我基本上想要做的是，如果childelement满足第 2 点，那么我会将 margin-top 样式附加到这个元素，否则不会。

我尝试的是

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

这适用childelement于父 div 中的所有内容，如果在父 div 的childelement起始标签之后。但是，如果我删除第一次出现的childelement，则margin-topcss 会在第二次丢失，childelement因为在删除第一个元素后，它的index becomes 0.

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

任何帮助都将不胜感激

Answer 1

您可以使用.filter()方法并读取previousSibling元素的属性，注意我曾经$.trim()排除过没有可见字符的文本节点，如果您想包含这些节点，您可以删除该方法。

$('#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'});