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>

带有 childelement 类的 p 标记 可以在 parentdiv 中的任何位置出现一次或多次。我想做的就是检测以下两种情况之一:-

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

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

我尝试的是

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

如果父 div 的起始标记后面有 childelement，这对于父 div 中的所有 childelement 都有效。但是，如果我删除第一次出现的 childelement，则 margin-top css 将在第二个 childelement 中丢失，因为删除第一个元素后，其 >索引变为0 .

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

任何帮助都将非常感激

Answer 1

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

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