SPServices - GetListItems - formatting results

Question

I am using SPServices in Sharepoint 2013 to get some results from cutom list named "navigator" presented here:

and for this purpose I am using code:

<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.SPServices-2014.01.min.js"></script>

<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $().SPServices({
        operation: "GetListItems",
        async: true,
        listName: "navigator",
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='URL' /><FieldRef Name='DisplayOrder' /><FieldRef Name='Target' /><FieldRef Name='Category' /></ViewFields>",
        CAMLQuery: "<Query><OrderBy><FieldRef Name='DisplayOrder' Ascending='true' /></OrderBy></Query>",
        completefunc: function (xData, Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function() {
                var title = ($(this).attr("ows_Title"));
                var href = ($(this).attr("ows_URL")).split(",")[0];
                var target = ($(this).attr("ows_Target"));
                var liHtml = "<li><a href='"+ href +"' target='"+ target +"'>" + title + "</a></li>";
                $("#navigator").append(liHtml);
            });
        }
    });
});
            </script>
            <ul id="navigator" />

I get list of all items like this:

But I would like to achieve something like this:

Is it possible to use "Category" as parent for this elements?

Answer 1

So upon your feedback try this one on. The divs will float and it will add a new div based on the category. You need to order items first by category. Then Display order.

$(document).ready(function() {
$().SPServices({
    operation: "GetListItems",
    async: true,
    listName: "navigator",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='URL' /><FieldRef Name='DisplayOrder' /><FieldRef Name='Target' /><FieldRef Name='Category' /></ViewFields>",
    CAMLQuery: "<Query><OrderBy><FieldRef Name="Category" Ascending='true'/><FieldRef Name='DisplayOrder' Ascending='true' /></OrderBy></Query>",
    completefunc: function (xData, Status) {

//Added previous category here
var previouscategory="";

        $(xData.responseXML).SPFilterNode("z:row").each(function() {
            var title = ($(this).attr("ows_Title"));
    // Set current category
    var category = ($(this).attr("Category"));
            var href = ($(this).attr("ows_URL")).split(",")[0];
            var target = ($(this).attr("ows_Target"));

    if(category !=previouscategory)
    {
        $("#navigator").append("<div style='float:left'><h4>"+category+"</h4>");
    }

            var liHtml = "<li><a href='"+ href +"' target='"+ target +"'>" + title + "</a></li>";
            $("#navigator").append(liHtml);

    if(category !=previouscategory)
    {
        $("#navigator").append("</div>);
    }

    previouscategory= category;
        });
    }
});

});