How do I get the ID of a selected item in a html list that uses jquery?

Question

I am using jquery to transfer selected items from a list to another list. The source list HTML is

<ul id="source-list">
    <li id="1">Accordion</li>
    <li id="2">Autocomplete</li>
    <li id="3">Tabs</li>
</ul>

Here is the jquery

jQuery(document).ready(function($) {
    $("#source-list, #target-list").selectable();

    $("#add-button").click(add);
    $("#add-all-button").click(addAll);
    $("#remove-button").click(remove);
    $("#remove-all-button").click(removeAll);

    addHiglightPlugin();      
}); 

function addHiglightPlugin() {
    $.fn.highlight = function() {
        return this
            .addClass("li-transfer-highlight")
            .removeClass("li-transfer-highlight", 400);
    }
}

function add() {
    $eg =  $("#source-list li").innerHTML;
    alert($eg);
    transfer($("#source-list li.ui-selected"));
}

I want the add function to display an alert box with the selected item in the source list. How can this be done?

There shouldn't be a need to have ID's 1,2,3... on the li's. Also looking at your JQuery I'm wondering if your dom has duplicate ID's on `remove-button`/others? — Smern, Jun 04 '14 at 13:17
why is `transfer`..? what's the intention of calling `addHiglightPlugin` in `ready()`? can you make a *so far working* demo out of this with which we can work..? btw, if you're transferring items between lists i'd suggest using jquery-ui sortable's [connected lists](http://jqueryui.com/sortable/#connect-lists) — T J, Jun 04 '14 at 13:19
Is your document HTML4 or HTML5. This determines whether your markup is valid or not. In [HTML4](http://www.w3.org/TR/html4/types.html#type-id), the `id` attribute must begin with a letter [A-Za-z]. It cannot begin with a number. [HTML5](http://www.w3.org/TR/html5/dom.html#the-id-attribute) is a little more permissive, stating that the `id` attribute must contain at least one character and no spaces. For reasons of backward compatibility, it may be of interest to follow the older spec. [Reference](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) — War10ck, Jun 04 '14 at 13:34

score 4 · Accepted Answer · answered Jun 04 '14 at 13:12

4

alert($("#source-list li.ui-selected").attr("id"))

or

alert($("#source-list li.ui-selected")[0].id)

answered Jun 04 '14 at 13:12

Murali Murugesan

22,423
17
73
120

score 0 · Answer 2 · answered Jun 04 '14 at 13:12

0

$(...).prop("id"); or $(...)[0].id;

answered Jun 04 '14 at 13:12

Andrei Nemes

3,062
1
16
22

I believe the OP was mostly concerned with what should replace the `...` in your answer. – Smern Jun 04 '14 at 13:30
1

This post is being automatically flagged as low quality because it is so short. Would you mind expanding it by adding some text to explain why this solves the problem? – gung - Reinstate Monica Jun 04 '14 at 13:58

How do I get the ID of a selected item in a html list that uses jquery?

2 Answers2