Using Jquery Selectable IDs multiple times

Question

I am completely new to jquery and I am trying to make two lists where every item is selectable.

Here is my Code:

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-1</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
      li{
         display: inline-block;
         padding: 20px;
         border: solid black;
         cursor: pointer;
      }

      .ui-selected{
         background-color: green;
         color: white;
      }
      </style>
      <script>
         $(function() {
            $("#selectable").selectable();
         });
      </script>
   </head>

   <body>
      <ol id = "selectable">
         <li>Product 1</li>
         <li>Product 2</li>
         <li>Product 3</li>
         <li>Product 4</li>
         <li>Product 5</li>
         <li>Product 6</li>
         <li>Product 7</li>
      </ol> 

      <ol id = "selectable">
         <li>Product 1</li>
         <li>Product 2</li>
         <li>Product 3</li>
         <li>Product 4</li>
         <li>Product 5</li>
         <li>Product 6</li>
         <li>Product 7</li>
      </ol> 
   </body>
</html>

It seems like an ID of a list cant be used twice since the items in the first list are selectable and the items in the second list are not selectable.

Lets say I have many more lists. There must be a more efficient way to make all items in all lists selectable than writing

$(function() {
    $("#selectable").selectable();
});

for every list ID I have.

I googled a lot and couldn't find a solution.

For this example I just used two lists so its not overloaded but I need to use a tons of list in my HTML template which is dynamically created and I need to make all items selectable in every list.

Have you tried changing the id to class and using it like: `$( ".selectable" ).selectable();` — palaѕн, Oct 19 '17 at 15:27
`ID` needs to be **unique**. You should **never** have multiple elements on the same page wit the same ID. Use a `class` if you need multiple elements. — Scott, Oct 19 '17 at 15:28
@palaѕн Thank you. Now it works.Yes I tried it, but i had a typo. — Kazuya91, Oct 19 '17 at 15:46

score 2 · Accepted Answer · answered Oct 19 '17 at 15:27

2

You should not use an ID more than once across an entire site. The whole point of ID is that it's supposed to be unique.

To target multiple elements, use classes. The way to think about classes is that they "classify" the type, or behaviour, of an element. Since you're trying to classify each list as "selectable", you can use a .selectable class.

<ol class="selectable">

Javascript

$('.selectable').selectable();

answered Oct 19 '17 at 15:27

Soviut

88,194
49
192
260

Thank you for that answer. Now it works. I thought of classes and i tried it, but it didnt work. Maybe i had a typo somewhere. I was wondering why it didnt work. – Kazuya91 Oct 19 '17 at 15:45
@Kazuya91 most likely you accidentally put a dot before you class name in the html `
– Soviut Oct 19 '17 at 17:12

Using Jquery Selectable IDs multiple times

1 Answers1