Question

对此我感到有些as愧，但是让Jquery选择我的文章正文，获取子图像并为其添加类时，我遇到了很多麻烦。我尝试用card和post-body替换card-body，但也没有运气。

我刚刚开始学习jq。

我搜索了堆栈溢出，并且相信我正确使用了css选择器。

How to add the img-responsive class in 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');
  });
});

我不明白为什么它没有选择图像标签并向其中添加类。有什么想法吗？

编辑：万一您遇到类似的麻烦，如果您查看浏览器的控制台日志，您可能会看到ReferenceError: "x" is not defined。确保先加载jq。

Answer 1

有两个问题。首先，您的选择器正在执行$('card')，该尝试试图找到一个不存在的<card>元素。由于这是一门课程，因此您想使用$('.card')。

第二，图像不是卡的直接子代。它们嵌套在两个级别的深处，因此children()将不起作用。您可以使用find()来解决此问题。

但是，您的代码可以同时固定和减少。

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

没有必要写显式的每个。当您执行诸如addClass之类的方法时，jQuery将自动循环遍历堆栈中的每个结果。

Answer 2

只需使用$('.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>

jQuery不将类添加到父div的子图像

2 个答案: