Redefine ID with ampersand - php

Question

Working with Sly's scrolling codes (http://darsa.in/sly/).
Having multiple Sly carousels on a page, I need to fix the ID of the frame
I generate them with '#=basic-XXX', where XXX is the record of the album.
the standard code is this:
var $frame = $('#basic');
var $slidee = $frame.children('ul').eq(0);
var $wrap = $frame.parent();
I try to read the ID, including the attached record number from the database.
var $frame = $("[id^=basic-]"); // start with...
// trying these two lines, but they FAIL
var num = $frame.slice(7);
var $frame = $("#basic-"+num);
//from here $frame should be redefined as #basic-THENUMBER
var $slidee = $frame.children('ul').eq(0);
var $wrap = $frame.parent();
Any idea how I can update var $frame with the ID so it works for the rest of the script?

Answer 1

$("[id^=basic-]") will return the elements that match the selector and you can then use .attr('id') to get the first element's id value. If there is only one element with an id starting with basic- then this will work:
$frame = $("[id^=basic-]").attr('id');
Note that when you use String.slice, character positions start at 0, so I think you probably want:
var num = $frame.slice(6);
See this demo:
var $frame = $("[id^=basic-]").attr('id');
console.log($frame);
var num = $frame.slice(6);
console.log(num);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<span id="basic-355">hello world!</span>
</div>
If you have multiple elements that have matching id's you will need to iterate them using .each or similar:
var $frames = $("[id^=basic-]");
$frames.each(function () {
let id = $(this).attr('id');
console.log(id);
let num = id.slice(6);
console.log(num);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<span id="basic-355">hello world!</span>
<span id="basic-562">hello world!</span>
</div>