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

Question

我正在循环属于 frag 的 span 元素类(class)。我想检测当前所在的frag元素是否是属于frag的a span元素的最小儿子/孙子/孙子(从左到右)类并属于 cond类，并且在其文本中有“if”或“else if”

contenteditable 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>

(顺便说一句，我的系统就像一个代码编辑器，所以我使用的是 contenteditable div)在这里，我想检测我是否在第三个 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”开头。然后，它将这些元素过滤为原始元素的 parent 、祖 parent 或曾祖 parent (代数 < 4)。

要检查的条件是:

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

它检查是否至少有一个有效的祖先(validAncest.length)，并且原始元素是其直接父元素的最后一个子元素，该子元素具有“frag”类(!$elem. nextAll('.frag').length)

问题

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

所以从上面的例子来看，第一个 b已经在 3 号给我警报了 b

更新应该在第二个 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. 祖 parent ，前提是它以“if”/“else if”开头，并且 $elem 的父级是该祖 parent 的最后一个 child
3. 曾祖 parent ，前提是它以 'if'/'else if' 开头，并且 $elem 的 parent 是中间祖 parent 的最后一个 child ，并且该祖 parent 是曾祖 parent 的最后一个 child