检测我当前所在的元素是否是元素的最小儿子/孙子/孙子

Question

我正在循环属于 frag 类的 span 元素。我想检测我当前所在的 frag 元素是否是属于frag 类和属于cond 类并且具有“如果" 或 "else if" 在其文本中

内容可编辑的 div（文本区域）

if( ((b>0) && (b<10)) || b==15 )

HTML 等效项

<div id="board">
  <div>
  <span class="frag cond">if<span class="openParen bm1">(</span> <span class="frag cond"><span class="openParen bm2">(</span><span class="frag cond"><span class="openParen bm3">(</span><span class="frag">b</span>&gt;0<span class="closeParen bm3">)</span></span> && <span class="frag cond"><span class="openParen bm4">(</span><span class="frag">b</span>&lt;10<span class="closeParen bm4">)</span></span><span class="closeParen bm2">)</span></span> || <span class="frag">b</span>==15 <span class="closeParen bm1">)</span></span>
  </div>
</div>

（顺便说一下，我的系统就像一个代码编辑器，所以我使用的是可内容编辑的 div）在这里，我想检测我是否在 3 号 b。

byossarian 帮我解决了这个问题：

var $elem = $('.frag').eq(fragNum);

var validAncest = $elem.parents('.cond').filter(function(i){
    return /^\s*(if|else\s+if)/.test($(this).text());
}).filter(function(i){
    var generations = 0,
    $elemCrawl = $('.frag').eq(fragNum);

    while ($elemCrawl[0] && $elemCrawl[0] !== this) {
        generations++;
        $elemCrawl = $elemCrawl.parent();
    }

    if ($elemCrawl[0] && generations < 4) {
        return true;
    }
});

找到元素的所有祖先，然后过滤一次以缩小以'if'或'else if'开头的那些。然后，它将这些过滤为原始元素的父、祖父母或曾祖父母（世代

要检查的条件是：

if (validAncest.length && !$elem.nextAll('.frag').length) {
    alert('target acquired');
}

它检查至少有一个有效的祖先 (validAnncest.length) 并且原始元素是它的 IMMEDIATE parent 的最后一个子元素，该子元素具有类 'frag' (!$elem. nextAll('.frag').length)

问题

IMMEDIATE parent 也应该是带有“if”或“else if”的元素的最后一个子/孙子

所以从上面的例子来看，第一个 b 已经给了我警报，第三个 b 应该在哪里

UPDATE应该在第二个b而不是(b<10)弹出警报

Answer 1

尝试将validAncest 更改为：

var validAncest = $elem.parents('.cond').filter(function(i){
    return /^\s*(if|else\s+if)/.test($(this).text());
}).filter(function(i){
    var generations = 1,
    $elemCrawl = $('.frag').eq(fragNum).parent();

    while ($elemCrawl[0] && $elemCrawl[0] !== this) {
        if (!$elemCrawl.is(':last-child')) {return false;}
        generations++;
        $elemCrawl = $elemCrawl.parent();
    }

    if ($elemCrawl[0] && generations < 4) {
        return true;
    }
});

这应该包括：

1. $elem 的父级，前提是它以 'if'/'else if' 开头
2. 如果祖父母以 'if'/'else if' 开头并且 $elem 的父母是此祖父母的最后一个孩子
3. 曾祖父母以“if”/“else if”开头且 $elem 的父母是中间祖父母的最后一个孩子并且该祖父母是曾祖父母的最后一个孩子