Javascript 响应式图像布局

因此，我有多个div，具有相同的类，其中的图像可以是1到4，这取决于div，我不知道有多少图像，因为它们来自数据库。 如何根据div.MY html中的图像数量为图像指定不同的类

<section class="feed-section">
    <article class="feed-article">
        <div class="question-options">
            <img src="http://placehold.it/600x400">
        </div>
    </article>
    <article class="feed-article">
        <div class="question-options">
            <img src="http://placehold.it/600x400">
            <img src="http://placehold.it/600x400">
            <img src="http://placehold.it/600x400">
            <img src="http://placehold.it/600x400">
        </div>
    </article>
    <article class="feed-article">
        <div class="question-options">
            <img src="http://placehold.it/600x400">
            <img src="http://placehold.it/600x400">
            <img src="http://placehold.it/600x400">
        </div>
    </article>
</section>

现在的问题是，它广告多个类，例如，它添加了三个一个的所有图像

我想用css做它们，比如

img.one {
    width:100%
}
img.two {
    width:50%
}

---

以此类推……

问题在于添加类的内容的上下文，因为您将获得所有的

问题选项。试试这个：

function imagesWidth() {
    var imagesConatiner = $('.question-options').each(function (index) {
        var images = $(this).children('img').length;
        var self = $(this);

        switch (images) {
            case 1:
                self.children('img').addClass('one')
                break;
            case 2:
                self.children('img').addClass('two')
                break;
            case 3:
                self.children('img').addClass('three')
                break;
            case 4:
                self.children('img').addClass('four')
                break;
            default:
                console.log(images)
        }
    })
};
imagesWidth()

下面是一个示例
您的代码的问题是使用常规选择器在图像上添加类<代码>$（'.question options img'）

将选择元素中具有类

问题选项的所有图像。您可以在当前上下文（
$（this）
）中使用
查找
，
子项
）或上下文选择器来选择每个

中当前元素内的图像

$('img', this).addClass('someclass');

这将把类添加到当前元素中的所有

img

元素中。i、 e.

。问题选项

在其上迭代

您的问题将通过使用上述任何一种方法得到解决

如果您正在寻找灵活优化的解决方案

您可以使用一个数组，其索引作为图像数，值作为类

将索引处的类添加到所有图像

//为类创建数组，索引将被视为图像数，值是要添加的类
//根据最大元素数修改数组
变量类=[''，'一'，'二'，'三'，'四']；
函数imagesWidth（）{
var imagescontiner=$（'.question options'）。每个（函数（索引）{
//从索引处的数组中获取值，即图像数，并将其作为类添加到此容器中的所有图像
$（'img'，this.addClass（class[$（this.children（'img'）.length]）；
})
};
imagesWidth（）
img.one{
宽度：100%
}
第二组{
宽度：50%
}
您是否有特定的理由为每个图像添加特定的类？您可以使用纯css flexbox而不使用javascript来实现相同的效果（确保图像在设定的宽度上均匀分布）

.question-options {
    display: flex;
    width: 500px;
    flex-direction: row;
    padding: 10px;
    background-color: blue;
}
.question-options div {
    flex: 1 1 auto;
}
.question-options img {
    width: 100%;
}

但是，您需要将图像包装在div中才能正常工作：

<section class="feed-section">
  <article class="feed-article">
    <div class="question-options">
        <div><img src="http://placehold.it/600x400"></div>
    </div>
  </article>
  <article class="feed-article">
    <div class="question-options">
        <div><img src="http://placehold.it/600x400"></div>
        <div><img src="http://placehold.it/600x400"></div>
        <div><img src="http://placehold.it/600x400"></div>
        <div><img src="http://placehold.it/600x400"></div>
    </div>
  </article>
  <article class="feed-article">
    <div class="question-options">
        <div><img src="http://placehold.it/600x400"></div>
        <div><img src="http://placehold.it/600x400"></div>
        <div><img src="http://placehold.it/600x400"></div>
    </div>
  </article>
</section>



注意：Flexbox（还）不能很好地处理图像。多亏了，我才能够让它工作。
您的代码应该是：

function imagesWidth() {
    var imagesConatiner = $('.question-options').each(function (index) {
        var images = $(this).children('img').length;
        switch (images) {
        case 1:
            $(this).find('img').addClass('one')
            break;
        case 2:
            $(this).find('img').addClass('two')
            break;
        case 3:
            $(this).find('img').addClass('three')
            break;
        case 4:
            $(this).find('img').addClass('four')
            break;
        default:
            console.log(images)
        }
    })
};
imagesWidth()

您没有将父div引用为“this”，而是将类添加到all中。问题选项“child”img“标记。
我仍然可以为每张图像创建2或3个类，我希望为每张div/图像创建一个clas（更新的答案，带有链接，以获得有关如何使用css的更多帮助）。这不是OP想要的，OP want如果有多个图像，则应将其最小化，以在containerA Flexbox类解决方案中显示所有图像，这正是OP想要的。它可以确保，若你们有x个组件（图像），它们同样宽，完全适合在容器中。这不是OP想要实现的吗？是的，但是你添加的演示没有显示OP想要的东西，你能更新演示吗
function imagesWidth() {
    var imagesConatiner = $('.question-options').each(function (index) {
        var images = $(this).children('img').length;
        switch (images) {
        case 1:
            $(this).find('img').addClass('one')
            break;
        case 2:
            $(this).find('img').addClass('two')
            break;
        case 3:
            $(this).find('img').addClass('three')
            break;
        case 4:
            $(this).find('img').addClass('four')
            break;
        default:
            console.log(images)
        }
    })
};
imagesWidth()