使用$(this)时奇怪的jQuery .closest

时间:2017-05-06 14:09:42

标签: jquery

此声明工作:

$(this).closest(".myclass").addClass("myextraclass");

但是这句话确实如此:

$("div").closest(".myclass").addClass("myextraclass");

在此上下文中使用它(使用mark.js库):

instance.markRegExp(/mypattern/gi, {className:"myclass", done: function() {
    $(this).closest(".myclass").addClass("myextraclass");
  }});

解决方案:( Baro和Chay22提供):

$(node).closest(".myclass").addClass("myextraclass");

上下文中,

instance.markRegExp(/mypattern/gi, {className:"myclass", each: function(node) {
        $(node).closest(".myclass").addClass("myextraclass");
      }});

2 个答案:

答案 0 :(得分:3)

如果不看HTML,我就不知道你想要什么,我觉得你的逻辑有些不对劲。这是因为您在突出显示的所有元素上添加了myclass,并且使用closest,您正在寻找具有此类的父元素。

$("div").closest(".myclass").addClass("myextraclass");

这项工作因为是一个简单的JQuery命令,没有别的。

$(this).closest(".myclass").addClass("myextraclass");
该上下文中的

thisMark对象,而不是突出显示的元素或父元素。

如果您想要突出显示所有元素,请尝试:

JSFiddle example

<强> HTML

<div class="findhere">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut augue neque. Cras euismod varius metus ut bibendum. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut augue neque. Cras euismod varius metus ut bibendum. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut augue neque. Cras euismod varius metus ut bibendum. 
</div>

<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut augue neque. Cras euismod varius metus ut bibendum. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut augue neque. Cras euismod varius metus ut bibendum. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut augue neque. Cras euismod varius metus ut bibendum. 
</div>

<强> CSS

.findhere { color:red; }
.myclass { text-decoration:underline; }
.myextraclass { font-weight:bold; }
.green { color:green; }

<强> JS

var instance = new Mark("div.findhere");
instance.markRegExp(/ipsum/gi, {className:"myclass", each: function(node) {
    $(node).addClass("green");
    $(node).closest(".findhere").addClass("myextraclass");
}});

答案 1 :(得分:1)

如果使用jquery,则应使用mark.ks的jquery语法。

$(".context").markRegExp(regexp [, options]);