Question

我正在尝试使用名称包含print的类来获取所有div元素。我试图这样做：

const matchedContainer = [];
    $('div').filter(() => {
        regex = new RegExp("\w*print\w*","i");
        if( this.class !== undefined && this.class.match(regex)) {
            var elementContents = $(this).prop('outerHTML'); 
            matchedContainer.push(elementContents);
        }
    }

这里我永远无法进入if循环，因为this.class始终等同于undefined。我也试过＆＃34; .each＆＃34;而不是＆＃34; .filter＆＃34;结果相同。我还尝试通过＆＃34; .filter（（ind，elem）=＆gt; {...}）＆＃34;给每个元素命名。然后尝试使用elem.class，但那也没有用。

我用this.id尝试了类似的方法，并且工作正常，任何人都可以告诉我我做错了什么？

Answer 1

在这里，我永远无法进入if循环，因为this.class始终是等同于未定义的

您正在访问不存在的对象的属性。

元素没有类属性（非属性），它具有className属性。

使用this.className代替this.class。

修改

因为您使用的是箭头函数，this指的是封闭范围。做到这一点

$('div').filter((i, v) => { //i and v are index and value regex = new RegExp("\w*print\w*","i"); if( v.className !== undefined && v.className.match(regex)) { //use v instead of this var elementContents = $(this).prop('outerHTML'); matchedContainer.push(elementContents); } }

Answer 2

您的代码有几个问题：

this中的filter为您提供Window对象的引用，而不是div元素
仅当className引用class元素时，您才应在this中使用this而不是div。但它没有引用div元素

const matchedContainer = [];
$('div').filter((index, elem) => {
    regex = new RegExp("\w*print\w*","i");
    if( $(elem).attr('class') !== undefined && $(elem).attr('class').match(regex)) {
        var elementContents = $(elem).prop('outerHTML'); 
        matchedContainer.push(elementContents);
    }
});
console.log(matchedContainer);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='print123'>1</div>
<div class='152print'>23</div>
<div class='print'>789</div>
<div class='pprint'>852</div>

上面 gurvinder 建议的答案不正确：

const matchedContainer = [];
$('div').filter(() => {
    regex = new RegExp("\w*print\w*","i");
    if( this.className !== undefined && this.className.match(regex)) {
        var elementContents = $(this).prop('outerHTML'); 
        matchedContainer.push(elementContents);
    }
});
console.log(matchedContainer);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='print123'>1</div>
<div class='152print'>23</div>
<div class='print'>789</div>
<div class='pprint'>852</div>

Answer 3

我认为您可以使用：$('div[class*="print"]')

如果我们谈论2或3个课程，您可以使用$(".class1,.class2,.class3,...")

如果类名在字符串的开头，则可以使用$("div[class^='print-']")

为什么我的this.class总是未定义jQuery过滤器？

3 个答案: