JQuery не добавляет класс к дочерним изображениям родительского div
Мне немного стыдно за это, но у меня много проблем с тем, чтобы JQuery выбрал тело моей статьи, захватил изображения детей и добавил к ним классы.
Я пробовал заменить card на post-body и card-body, но тоже не повезло.
Я только начал изучать jq.
Я искал переполнение стека и считаю, что правильно использую селектор css.
addClass to body не будет работать
Как добавить класс в тег тела?
Как добавить класс, отвечающий за img, в javascript
Я почти уверен, что делаю это правильно (несмотря на то, что по какой-то причине он не работает), но я не уверен, в чем может быть проблема.
Базовый HTML:
<!DOCTYPE html>
<html lang = "en">
<head>
...
{% load static %}
{% block js %}
{% endblock %}
...
</head>
Шаблон сведений о публикации:
{% extends "base_generic.html" %}
{% block js %}
<script type = "text/javascript" src = "{% static 'js/post-detail.js' %}"></script>
{% endblock %}
<div class = "card">
<div class = "card-body post-body">
// image added here in admin by using 'ckeditor'
<img alt = "" src = "..." style = "height:792px; width:1280px">
</div>
</div>
JS:
$(document).ready(function(){
$('card').children('img').each(function(){
$(this).addClass('d-block img-fluid mx-auto');
});
});
Я не понимаю, почему он не выбирает теги изображений и не добавляет к ним класс. Любые идеи?
edit: Если у вас возникла аналогичная проблема, если вы проверите журнал консоли браузера, вы можете увидеть ReferenceError: "x" is not defined. Убедитесь, что вы сначала загрузили jq.
Также .children() просто ищет потомков немедленный. Вам нужен .find().
попробуйте $('card') в $('.card')
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Есть пара проблем. Во-первых, ваш селектор выполняет $('card'), который пытается найти элемент <card>, которого не существует. Поскольку это класс, вы хотите использовать $('.card').
Во-вторых, изображения не являются прямыми дочерними элементами карты. Они вложены на два уровня в глубину, поэтому children() работать не будет. Вы можете использовать find(), чтобы исправить это.
Однако ваш код может быть исправлен и сокращен одновременно.
$('.card img').addClass('d-block img-fluid mx-auto');`
Нет необходимости явно писать каждый. jQuery автоматически перебирает каждый результат в стеке, когда вы выполняете такой метод, как addClass.
Как ни странно, я пробовал это вначале, прежде чем начал просто гадать и изобретать код. Я понял, что не загружаю библиотеку :( Спасибо за помощь
Просто используйте $('.card img').each(......
$(document).ready(function(){
$('.card img').each(function(el){
$(this).addClass('d-block img-fluid mx-auto');
// Only for demonstration
console.info('Class added: ' + $(this).attr('class'));
});
});img{
max-height: 100px;
max-width: 100px;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "card">
<div class = "card-body post-body">
// image added here in admin by using 'ckeditor'
<img alt = "" src = "https://www.istockphoto.com/resources/images/PhotoFTLP/img_67920257.jpg" style = "height:792px; width:1280px"/>
</div>
</div>
$('card')ищет<card>. Я полагаю, это опечатка.