你得到了它的要点的权利，然而，你没有办法瞄准其他卡，一旦你处理了第一个。
实现这一点的一种方法是使用getElementsByClassName，它将返回一个html元素数组，其中包含给定类的每个元素：

const cardElements = document.getElementsByClassName("card");

字符串
现在，有了这些，你可以使用你的循环，并使用我们刚刚创建的cardElements变量和item函数，将“cardElement”定位在索引i处。

const cardElements = document.getElementsByClassName("card");

for (var i = 0; i < data.length; i++) {
    const currentCardElement = cardElements.item(i);

    /** code that define the title and all... **/
}

型
现在，要定位currentCardElement“内部”的元素，可以使用getElementsByClassName函数来定位card元素的子节点。
当在HTMLElement上调用这个函数时，该函数将只返回父HTMLElement的子树中匹配的HTMLElement，即我们调用该函数的那个。
这意味着，即使我们有多张带有<h3 class="title">的卡，也只会返回currentCardElement下面的h3。
为每个包含数据的div设置一个不同的类可能会很有用，这样每次调用只有一个元素。

<div class="column">
        <div class="card">
            <h3 class="title">Card 2</h3>
            <p class="image">Some text</p>
            <p class="price">Some text</p>
        </div>
    </div>

const cardElements = document.getElementsByClassName("card");

for (var i = 0; i < data.length; i++) {
    const currentCardElement = cardElements.item(i);

    const cardTitle = currentCardElement.getElementsByClassName("title").item(0);
    cardTitle.innerHTML = data[i].product_name

    /** We do the same for the image and price using the correct class name */ 
}

的字符串
现在，您应该已经将data阵列中的相应产品填充到每张卡中。
下面你会看到一个完整的例子。

const jsonArr = '[{"product_id": 1,"product_name": "Product 1","product_image": "product1.jpg","product_price": 19.99},{"product_id": 2,"product_name": "Product 2","product_image": "product2.jpg","product_price": 24.99},{"product_id": 3,"product_name": "Product 3","product_image": "product3.jpg","product_price": 29.99}]';
    const data = JSON.parse(jsonArr);

const cardElements = document.getElementsByClassName("card");

for (var i = 0; i < data.length; i++) {
    const currentCardElement = cardElements.item(i);

    const cardTitle = currentCardElement.getElementsByClassName("title").item(0);
    cardTitle.innerHTML = data[i].product_name;

    const cardImage = currentCardElement.getElementsByClassName("image").item(0);
    cardImage.innerHTML = data[i].product_image;
    
    const cardPrice = currentCardElement.getElementsByClassName("price").item(0);
    cardPrice.innerHTML = data[i].product_price;
}

<div class="row">
    <div class="column">
        <div class="card">
            <h3 class="title">Card 1</h3>
            <p class="image">Some text</p>
            <p class="price">Some text</p>
        </div>
    </div>

    <div class="column">
        <div class="card">
            <h3 class="title">Card 2</h3>
            <p class="image">Some text</p>
            <p class="price">Some text</p>
        </div>
    </div>

    <div class="column">
        <div class="card">
            <h3 class="title">Card 3</h3>
            <p class="image">Some text</p>
            <p class="price">Some text</p>
        </div>
    </div>
</div>

P.S.你应该考虑使用querySelector和querySelectorAll函数，它们更容易使用，因为它们使用css选择器来定位元素。