检测当前元素im是元素的最小儿子/孙子/孙子

问题描述

我正在环绕属于 frag 类的span元素。我想检测当前的frag元素是否是属于 frag 类的span元素的最小的子/孙/孙子（从左到右）属于 cond 类，并且在其文本中具有if或else if。

I am looping around span elements which belongs to frag class. I wanted to detect if the frag element im currently in is the youngest son/grandson/grandgrand son(from left to right) of the a span element which belongs to frag class and belongs to cond class and has an "if" or "else if" in its text

contenteditable div（textarea）

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

HTML等效 b
$ b

HTML equivalent

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

(My system is like a code editor by the way, so i am using a contenteditable div) Here, i wanted to detect if im on the 3rd b.

帮助我：

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'。然后将它们过滤到那些原始元素的父，祖父或者祖父（代

finds all the ancestors of the element, it then filters then once to narrow down to those starting with 'if' or 'else if'. It then filters these to those that are either the parent, grandparent or great-grandparent (generations < 4) of the original element.

要检查的条件是：

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

它检查至少有一个有效的祖先（validAncest.length）AND原始元素是其具有类'frag'（！$ elem.nextAll（'。frag'）。length）的 IMMEDIATE parent 的最后一个子元素

It checks that there is at least one valid ancestor (validAncest.length) AND that the original element is the last child of it's IMMEDIATE parent that has the class 'frag' (!$elem.nextAll('.frag').length)

问题

IMMEDIATE parent也应该是元素的最后一个子元素如果

IMMEDIATE parent should also be the last child/grandchild of the element with "if" or "else if"

从上面的例子中，第一个 b 已经给我警报第三个 b

So from the example above, the first b will already give me the alert where it should be on the 3rd b

UPDATE 应该在第二个 b 不在（b

推荐答案

尝试将 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开头'


2. 祖父提供它以'if'/'else if' $ elem是这个祖父母的最后一个孩子


3. 祖父母提供的是以'if'/'else if'开头，$ elem的父节点是中间节点的最后一个子节点祖父母和祖父母是最大的祖父母的最后一个孩子

这篇关于检测当前元素im是元素的最小儿子/孙子/孙子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！