JQuery не добавляет класс к дочерним изображениям родительского div - PullRequest
Новая
       1

JQuery не добавляет класс к дочерним изображениям родительского div

0 голосов
/ 25 июня 2018

Мне немного стыдно за это, но у меня много проблем с тем, чтобы заставить Jquery выбрать тело моей статьи, взять изображения детей и добавить к нему классы.Я попытался заменить card на post-body и card-body, но тоже не повезло.

Я только начал изучать jq.

Я искал переполнение стека и считаю, что используюcss-селектор правильно.

addClass к телу не будет работать

Как добавить класс к тегу 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.

Ответы [ 2 ]

0 голосов
/ 25 июня 2018

Просто используйте $('.card img').each(......

$(document).ready(function(){
  $('.card img').each(function(el){
    $(this).addClass('d-block img-fluid mx-auto');
    // Only for demonstration
    console.log('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>
0 голосов
/ 25 июня 2018

Есть пара вопросов. Во-первых, ваш селектор делает $('card'), который пытается найти элемент <card>, который не существует. Поскольку это класс, вы хотите использовать $('.card').

Во-вторых, изображения не являются прямыми дочерними элементами карты. Они вложены в два уровня, поэтому children() не будет работать. Вы можете использовать find(), чтобы исправить это.

Однако ваш код может быть исправлен и уменьшен одновременно. 

$('.card img').addClass('d-block img-fluid mx-auto');`

Нет необходимости писать явный каждый. jQuery автоматически зацикливается на каждом результате в его стеке, когда вы выполняете метод, подобный addClass.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...