JQUERY通过json-list循环

I have a PHP-Page which returns a JSON-List (Enumerated and contains only ints up to ~210). This JSON-List should be handled by a jQuery-Script. It should search some divs, whose id's contain the numbers which are in the JSON, and replace their class by another one. How would I do this?

index.php

@charset "utf-8";
/* CSS Document */
body {
    font-family:Roboto, Arial, sans-serif;
}
#header {
    width: 100%;
    height: 2em;
    background-image: linear-gradient(white, #ddd);
    border-bottom: 1px solid black;
}
#headercontent {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    float: left;
}
#navleft {
    float: left;
    background-color: #EEE;
    width: 20%;
    height: 100%;
}
#filter {
    margin: 0.2em;
}
#container {
    float:left;
    background-color: red;
    width: 80%;
    height: 100%;
}

.imgthumbbox {
    float:left;
    width: 20%;
    min-width: 15em;
    background-color:#EEE;
    padding: 2px;
    border: 1px solid black;
    margin: 0.5em;
}
.hidden {
    float:left;
    width: 20%;
    min-width: 15em;
    background-color:#EEE;
    padding: 2px;
    border: 1px solid black;
    margin: 0.5em;
    display:none;
}
.imgbox {
    width: 100%;
    position: relative;
}
.imgbox:before {
    content: "";
    display: block;
    padding-top: 66.666%;
}
.imgcontainer {
    position:absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
img {
    height: 100%;
    width: auto;
}
#buttoncontainer {
    display:block;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Titel -->
<title>AJAX-Test</title>
<!-- Stylesheet -->
<link href="style.css" type="text/css" rel="stylesheet" />
<!-- AJAX -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    /* SCRIPT */
    function filter(cb){
        $.get("shownitems.php",
            {
                checkbox: cb //Send checkbox value (Value, not "checked") ??
            },
            function(data){
                //WHAT?
            }
        );
    }
});
</script>
</head>
<body>
    <?php
        include "functions.php";
        // VERBINDUNG AUFBAUEN
        $mysqli = new mysqli(/* CENSOR */);
        if (mysqli_connect_errno()) {
           printf("Ein Fehler ist aufgetreten.<br/>Senden Sie bitte folgenden Code an den Webmaster: %s
", mysqli_connect_error());
        exit();
    }
// DATENBANK AKTUALISIEREN
updatedb();
?>
<form action="generatezip.php" method="get"> <!-- GENERATEZIP IS'NT SCRIPTED ALREADY -->
<div id="header">
    <div id="headercontent">
        logo and stuff
    </div>
</div>
<div id="contentcontainer">
    <div id="navleft">
        <h3>Filtern</h3> <!-- FILTER -->
        <div id="filter">
            <h4>Datum</h4> <!-- DATE -->
            <input type="checkbox" name="date" value="2015-06-25" id="d1" checked="checked" onclick='filter(this)'/>
                <label for="2015-06-25">1. Abend (25.06)</label><br /> <!-- THREE OF THESE - SHORTENED FOR SO -->
        </div>
        <div id="filter">
            <h4>Tanz/Programmtitel</h4>
            <input type="checkbox" name="track" value="1" id="t1" checked="checked" onclick='filter(this)'/>
                <label for="1">Titel 1 - "Wooden Arms"</label><br /> <!-- FOURTEEN OF THOSE - SHORTENED FOR SO -->

    </div>
    <div id="container"> <!-- EXAMPLE-BOX: THE RESULTS OF THE PHP-SCRIPT BELOW LOOK LIKE THIS -->
        <div id='3cont' class="imgthumbbox">
            <div class="imgbox">
                <div class="imgcontainer">
                    <img src="thumbs/_MG_6388.jpg" title="3" />
                </div>
            </div>
            Bild 3<br />
            <input name="imgselect" id="3sel" type='checkbox'/>
            <label for="3sel">Bild herunterladen</label>
        </div>
    <?php
    $result = $mysqli->query('SELECT id, name FROM `img`');
    while ($row = $result->fetch_object())
    {
        echo $row->id;
        echo $row->name;
        echo '<div id="'.$row->id.'cont" class="imgthumbbox">';
            echo "<div class='imgbox'>";
                echo '<div class="imgcontainer">';
                    echo '<img src="thumbs/'.$row->name.'.jpg" title="'.$row->id.'" />';
                echo '</div>';
            echo '</div>';
            echo 'Bild '.$row->id.'<br/>';
            echo '<input name="imgselect" id="'.$row->id.'sel" type="checkbox"/>';
                echo '<label for="'.$row->id.'sel">Bild herunterladen</label>';
        echo '</div>';
    }
    ?>
        <div name="buttoncontainer">
            <button type="submit">Herunterladen</button>
        </div>
    </div>
</div>
<!-- HOW TO USE THE SITE -->
<script type="text/javascript">
alert('Bitte wählen Sie die Bilder, die Sie herunterladen möchten, mit den Checkboxen an den Bildern aus. Drücken Sie dann auf "Herunterladen". Sie können die Bilder mit den Checkboxen in der linken Spalte filtern. Sie können ein Bild vergrößern, indem sie auf das Vorschaubild klicken.');
</script>
</form>

</body>
</html>

shownitems.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Filter</title>

</head>

<body>
<?php
$mysqli = new mysqli(/* CENSORED */);
if (mysqli_connect_errno()) {
    printf("Ein Fehler ist aufgetreten.<br/>Senden Sie bitte folgenden Code an den Webmaster: %s
", mysqli_connect_error());
    exit();
}
$cb = $GET_["id"];
$state = $GET_["state"];

if (strleng($cb)>2){
    $array = array();
    $request = "SELECT id FROM `img` WHERE `day` = '".$cb."'";
    $result = $mysqli->query($request);
    while($row = $result->fetch_row()){
        $array[] = $row[0];
    }
    $result->close;
    $json = json_encode($array);
    echo $json;
}
if (strleng($cb)<=2){
    $request = "SELECT * FROM `img` WHERE `track` = ".$cb;
    $result = $mysqli->query($request);
    while($row = $result->fetch_ro()){
        $array[] = $row[0];
    }
    $result->close;
    $json = json_encode($array);
    echo $json;
}
?>
</body>
</html>

Leo

</div>

I think I can answer the "how do I loop through json" question but that is entirely too much code / not nearly specific enough.

function filter(cb){
    $.get("shownitems.php",
        {
            checkbox: cb //Send checkbox value (Value, not "checked") ??
        },
        function (data){
            // data is the json response from showitems.php
            // JSON is an array of objects, so you want to loop through
            // the array to access each object
            data.forEach(function (item) {
                console.log(item);
            });
        }
    );
}

Edit: I'm looking back at my response I think it would be more helpful to explain a more modular method for making get requests:

function callGet(endpoint, options) {
    var callback = options.hasOwnProperty('callback') ? options.callback : null;
    $.get(endpoint, options.data, callback);
}

called as:

var options = {
    data: {
        checkbox: cb
    },
    callback: function (res) {
        if (res && res.length > 0) {
            res.forEach(function (item) {
                console.log(item);
            });
        }
    }
}

callGet("shownitems.php", options);

Which can even be wrapped further:

function filter(cb) {
    var options = {
        data: {
            checkbox: cb
        },
        callback: function (res) {
            if (res && res.length > 0) {
                res.forEach(function (item) {
                    console.log(item);
                });
            }
        }
    }

    callGet("shownitems.php", options);
}