Jquery ajax – How to filter or find in AJAX callback results from PHP listing files from directory

To achieve the results I needed to use .load instead of an ajax call.

First I edited do1.php by taking out the if($_SERVER["REQUEST_METHOD"]... and then changed the ehco statement to add a unique id.

do1.php

  $af = glob("main/photos/*.*");
  for ($i=0; $i<24; $i++)
      {
      $iname = $af[$i];
      $supported_format = array('gif','jpg','jpeg','png','mp4');
      $ext = strtolower(pathinfo($iname, PATHINFO_EXTENSION));
      if (in_array($ext, $supported_format))
        {
              list($width, $height) = getimagesize($iname);
                if( $height / $width > 1.33) {$ori = "p";}
                elseif( $width / $height > 1.33) {$ori = "l";}
                elseif( $height / $width < 1.33) {$ori = "s";}
                elseif( $width / $height < 1.33) {$ori = "s";}
        }
echo "<img id='i".$i."' class='".$ori."' src='".$iname."' alt='".$iname."' height='280px' />";
      }

So now the page does not need to be AJAX, called just loaded. Also; Each image is assigned a unique id id='i0', id='i1', id='i2'..., and each element has an assigned class based on it's orientation (portrait=p, landscape=l, square=s).

Next I added three span elements (#c1, #c2, #c3) into the div where I wanted the content to show (#supics).

Next I edited my script to LOAD from do1.php insted of using the AJAX POST.

Script on Index.php

$(document).ready(function(){
  $("#galphoto").click(function(){
    $("#chme").children().hide(2000, function() {
            $("#supics").delay(2000).slideDown(3000);
            $("#supics").css({"max-height": "700px", "overflow": "auto"});
var $page = $('<div><div>').load('do1.php .p, .s, .l', //loads elements with classes of p, s, & l from do1.php
    function() {
var $p = $page.find('.p'); //finds all class='p' elements & assigns $p as variable to them
var $s = $page.find('.s'); //finds all class='s' elements & assigns $s as variable to them
var $l = $page.find('.l'); //finds all class='l' elements & assigns $l as variable to them

    var ipics = [$p, $s, $l]; //putting variables in an array
    $('#c1').html(ipics[0]); //puts $p (all class.p elements) into element with id='c1'
    $('#c2').html(ipics[1]); //puts $s (all class.s elements) into element with id='c2'
    $('#c3').html(ipics[2]); //puts $l (all class.l elements) into element with id='c3'

       $(ipics[0]).addClass("fad"); //adds another class to all class.p elements for extra styling
       $(ipics[1]).addClass("fid"); //adds another class to all class.s elements for extra styling
       $(ipics[2]).addClass("fod"); //adds another class to all class.l elements for extra styling
      });
    });
  });
});

This may be dirty (though I'm no judge at determining that), but it allows me to load everything I need at once, then sort the content, and style it all anyway I need. I hope this helps someone out. Thank you all for the help.