How to get div class name/id from dropped sortable element?

Question

I'm using a sortable with a table that I created. And what I want is to be able to get the div class name that contains the element that I dropped.

Here's my html:

<div class="@c.CodigoAgrupador">
    <div class="subcatalog">
        @foreach (CodigoAgrupadorCuentas_CE c2 in Model.CodigosAgrupadores)
        {
            if (double.Parse(c2.CodigoAgrupador) > double.Parse(c.CodigoAgrupador) && double.Parse(c2.CodigoAgrupador) < (double.Parse(c.CodigoAgrupador) + 1))
            {
                <h4><a href="#">@c2.CodigoAgrupador  -  @c2.NombreCuenta</a></h4>
                <div>
                    <div class="SpecificCatalog">
                        <ol>
                            <li class="placeholder">Add your items here</li>
                        </ol>
                    </div>
                </div>
            }
        }
    </div>
    <div class="GeneralCatalog">
        <ol>
            <li class="placeholder">Add your items here</li>
        </ol>
    </div>
</div>

And here's part of my script:

<script>
    $(function () {
        $("#catalog").accordion({
            collapsible: true,
            active: false,
            autoHeight: false,
            change: function (event, ui) {
                var currentHeaderID = ui.newHeader.find("a").attr("id");
                window.alert(currentHeaderID);
            }
        });
        $(".subcatalog").accordion({
            collapsible: true, active: false, autoHeight: false,
            change: function (event, ui) {
                var currentHeaderID = ui.newHeader.find("a").attr("id");
                window.alert(currentHeaderID);
            }
        });

        $(".GeneralCatalog").sortable({
            connectWith: ".SpecificCatalog, .listaCatalogosContenido", helper: "clone",
            appendTo: "body",

            stop: function (event, ui) {
                //console.log((this).sortable('toArray', { attribute: 'value' }));
                console.log(ui.item);

                //$("div#catalog h3 a").each(function (item) {
                //    alert($(this).text());
                //});
            }
        });
    });
</script>

What I'm interested in, is that when I call the stop function, from jquery, I can use the ui.item to get class name of the div that contains it, something like:

ui.item.parent.getclassname();

I don't want to know if the element is within a class, I want to know the class name. Sorry if it is hard to understand, my english is not the best. Any help is welcome.

score 2 · Accepted Answer · edited May 23 '17 at 12:30

2

You should be able to do something like:

ui.item.parent().hasClass(<whatever you want to test>)

Please clarify if that doesn't give you what you want...

Ok, just re-read your question, and it sounds like you want to know all the classes of the parent div, not just if the div has a specific class. From this other SO question / answer, you can do:

ui.item.parents('div')[0].className.split(/\s+/);

edited May 23 '17 at 12:30

Community

1
1

answered Nov 24 '14 at 20:25

user

4,651
5
32
60

That's almost exactly what I need to do, It gives me the information I of the class name. Although I still have one problem. The class that I want to obtain the name of, is one level above the one that contains the element. How can I apply that line to a
above? I tried ui.item.parent.parents but that is undefined. EDIT: Never mind, I got it! Thank you very much, that was exactly what I needed
– Jorge Díaz Nov 25 '14 at 16:49

How to get div class name/id from dropped sortable element?

1 Answers1