javascript - 遍历 ajax 响应元素

Question

我有一个按钮，它对一个 php 文件进行 ajax 调用，该文件又发送一些 html 数据作为响应。

$.ajax({
                type: 'POST',
                data: {
                    cherry: cherry,
                    chocolatechip: chocolatechip,
                    butterscotchchip: butterscotch,
                    gems: gems,
                    sweetner: sweetner
                },
                url: 'customcakebox.php',
                success: function (content) {


                }
            });

Html Response 包含这三个元素:

<img id="abc1" src="ski.png" height="13px" width="15px">
<img id="abc2" src="cho.png" height="15px" width="15px">
<img id="abc3" src="cho.png" height="15px" width="15px">

然而，这些元素可以根据 php 文件中指定的条件减少或增加。

我想做的是遍历这些元素并只打印那些我想打印的元素？

注意: 我知道你会说为什么我不能只传递我需要显示的那些。好吧，问题是我想显示每个元素随机在 div 中并使其工作。我确实需要它们中的每一个。

Random positon of elements inside div这就是我正在努力实现的。(这只是作为我正在努力做的引用)

.php 文件:

require 'connect.inc.php';
require 'session/inc.encrypt.php';
$cherry = $_REQUEST['cherry'];
$chocolatechip = $_REQUEST['chocolatechip'];
$butterscotchchip = $_REQUEST['butterscotchchip'];
$gems = $_REQUEST['gems'];
$sweetner=$_REQUEST['sweetner'];
$items = '';
if ($cherry > 20)
    $cherry = 20;
else if ($cherry < 0)
    $cherry = 0;
if ($chocolatechip > 20)
    $chocolatechip = 20;
else if ($chocolatechip < 0)
    $chocolatechip = 0;
if ($butterscotchchip > 20)
    $butterscotchchip = 20;
else if ($butterscotchchip < 0)
    $butterscotchchip = 0;
if ($gems > 20)
    $gems = 20;
else if ($gems < 0)
    $gems = 0;

if ((!empty($cherry) || $cherry == 0) && (!empty($chocolatechip) || $chocolatechip == 0) && (!empty($butterscotchchip) || $butterscotchchip == 0) && (!empty($gems) || $gems == 0)) {
    for ($i = 0; $i < $cherry; $i++)
    {

        $items .= ' <img src="ski.png" height="13px" width="15px">';
    }

    for ($i = 0; $i < $chocolatechip; $i++)
        $items .= ' <img  src="cho.png" height="15px" width="15px">';
    for ($i = 0; $i < $butterscotchchip; $i++)
        $items .= '<img  src="che.png" height="15px" width="15px">';
    for ($i = 0; $i < $gems; $i++)
        $items .= '<img  src="but.png" height="15px" width="15px">';

}

$customcake['cherry']=$cherry;
$customcake['chocolatechip']=$chocolatechip;
$customcake['butterscotchchip']=$butterscotchchip;
$customcake['gems']=$gems;
$customcake['sweetner']=$sweetner;

$_SESSION['customcake']=$customcake;

echo $items;

这里没有设置ids，请不要提，我稍后再设置。

Answer 1

假设您返回的响应在一个名为 content 的变量中，然后将此代码放入一个循环中

 $(document).ready(function() {
  $(content).filter('img').each(function(index,item) {
    alert(item);
  });
});

在循环中，您将获得每个图像作为项目对象。如果您的响应返回的不仅仅是图像对象，那么您还可以使用 $(content).filter('img').each