Почему мой this.class всегда не определен с помощью фильтра jQuery?

Я пытаюсь получить все элементы 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. Я также пробовал с ".each" вместо ".filter" с тем же результатом. Я также попытался дать имена каждому элементу с помощью ".filter ((ind, elem) => {...})", а затем попытался использовать elem.class, но это тоже не сработало.

Я пробовал аналогичный подход с this.id, и он работал нормально, может ли кто-нибудь сказать мне, что я делаю не так?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
475
3

Ответы 3

Here I am never able to enter the if loop as this.class is always equated to undefined

Вы обращаетесь к свойству несуществующего объекта.

У Элемента нет класса имущество (не атрибут), у него есть свойство 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);
    }
}
this дает ссылку на объект Window. Как можно сказать, что это письменный ответ?
Ankit Agarwal 13.03.2018 07:57

Думаю можно использовать: $('div[class* = "print"]')

Если мы говорим о 2 или 3 классах, вы можете использовать $(".class1,.class2,.class3,...")

Если имя класса находится в начале строки, вы можете использовать $("div[class^='print-']")

У вас есть несколько проблем с вашим кодом:

  1. this внутри filter дает вам ссылку на объект Window, а не на элемент div.
  2. Вы должны использовать 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.info(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>

Неверный ответ, предложенный гурвиндер выше:

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.info(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>

Другие вопросы по теме