We Keep Coding

select a string after a substring in an element's class name

I have an element that contains an input text, to get the input text I'm using the jQuery method find.
The input text has a class name like this page-id-x with the x is variable, so I want to select that number after the substring page-id, and this is what I tried :
var id = ui.item.find('input').attr('class').split(/\s+/).filter(function(s){
return s.includes('page-id-');
})[0].split('-')[2];
console.log(id);
I think this code is too complicated, but I couldn't figure out some other way to do it.
If someone knows a better way, I'll be thankful.
Thanks in advance.

I'm going to assume the x part of page-id-x, not the id part, is what varies (since that's what your code assumes).
Another way to do it is with a regular expression, but I'm not sure I'd call it simpler:
var id = ui.item
.find('input')
.attr('class')
.match(/(?:^|\s)page-id-([^- ]+)(?:\s|$)/)[1];
Example:
var ui = {
item: $("#item")
};
var id = ui.item
.find('input')
.attr("class")
.match(/(?:^|\s)page-id-([^- ]+)(?:\s|$)/)[1];
console.log(id);
<div id="item">
<input class="foo page-id-23 bar">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The above makes the same assumptions your current code does, which are:
The first input in ui.item is the one you want
It will have the relevant class name
I assume those are okay, as your question is asking for an alternative, suggesting what you have is working.

As you're using jQuery, take a look at this: https://api.jquery.com/category/selectors/attribute-selectors/
For your case, you can use $('[class^="page-id-"'). These types of selectors (listed on the link above) actually work in CSS, too. (At least most should, if not all.)
To get the number after page-id-, my suggestion would be to store that number in some other HTML attribute, like data-pageID="1" or the like.
So you could have:
<div id="page-id-3" data-pageID="3">CONTENT</div>
Then, when you have the DOM element using $('[class^="page-id-"'), you can access that number with .attr('data-pageID').val().

If you can control the HTML markup, instead of using class names, you can use data attributes instead. For example, instead of:
<input class="page-id-1">
You can use:
<input data-page-id="1">
Then jQuery can find this element effortlessly:
$('[data-page-id]').attr('data-page-id')

You can find your element using the *= selector.
let elem = document.querySelector('[class*=page-id-]')
Once you have the element, you can parse the id out:
let [base, id] = elem.className.match(/page-id-(\d+)/)
console.log('page id: %s', id);

jQuery: how to retrieve element by concatenated ID?

I am dynamically creating and generating their id's to be something like hidden1234.
In the below Javascript code, var hid is retrieved properly by document.getElementById. But the jQuery line below has a syntax error. How can I retrieve this element by Id using jQuery?
var hid = document.getElementById('hidden'+id);
var hidden = $("#'hidden'+id");

It's just a simple typo:
var hidden = $('#hidden'+id);
You want to select an element with the id 'hidden' + id. The according CSS / jQuery selector therefore looks like '#hidden' + id.

How to get inner html based on attribute Id

I have the attibute Id.
In console when I type in the following jquery command:
$('#LocationRadioButtons a')
I get the following output
[<a id=​"4" href=​"#">Test​</a>​, <a id=​"5" href=​"#">Test1​</a>​, <a id=​"6" href=​"#">test2​</a>​]
Which is an array
If I type in the following jquery command:
$('#LocationRadioButtons a').first();
It will return the first element in that array:
Test​​
How do I return an element based on it's Id, and return its innerHTML. For example id = 5 innerHTML is test1,
Cheers

You can get the html by using html()
You can use
$('#LocationRadioButtons #5').html();
Based off your markup you can actually simply use
$('#5').html();
PS: I'd refrain from having ids start with a number. HTML4 doesn't like this.

while Id is unique for this element you can directly use id to get html
$('#5').html();

Try this,
$('#LocationRadioButtons a[id$="5"]').text();

an id is unique so you can just use the id selector to select an element with a specific id like this:
$('#5').html();

Try this:
As you already have the elements id, just do
$('#5').html();
Will alert Test1
jquery each() loop is useful when you don't have a selector and you want to parse through each element to check for certain condition.
$('#LocationRadioButtons a').each(function(index, value){
var myattr = $(this).attr('id');
if(myattr=='5') {
alert( $(this).html() );
}
});

How to select cell using jQuery id selector

I am getting ID of table cell using the following Javascript
var tempCell = e.target.parentNode.id;
Now I have to append a table in tempCell using jQuery like that
var htmlToAppend = '<table id="tbleSelectApproovers"></table>';
$(???).append(htmlToAppend);
I am not sure how to write the syntax to use id for the purpose to add table in td. What to write in place of question mark to add table in tempCell

You have to give id to td in id selector. Before id you need to give #
$('#idoftd').append(htmlToAppend);
If you can get the element by e.target.parentNode then you can pass it to jQuery method to make jQuery object out of it.
$(e.target.parentNode).append(htmlToAppend);

use escaping rule from selector http://api.jquery.com/category/selectors/
$('#e\\.target\\.parentNode\\.id').append(htmlToAppend);
or
$('[id="e.target.parentNode.id"]').append(htmlToAppend);
update:
$('#'+e.target.parentNode.id).append(htmlToAppend);
or
$('#'+tempCell ).append(htmlToAppend)

From the looks of it you are trying to append the element to the current elements parent so
var htmlToAppend = '<table id="tbleSelectApproovers"></table>';
$(e.target.parentNode).append(htmlToAppend);

easy way : keep an id or class attribute to the table cell like for example say
<td id="tablecellid">
now if you want to append anything keep it in a variable for readability
var data = ''
and do the following
$("#tablecellid").append(data);

Assuming your cell looks like this:
<td id='myfavcell'></td>
you would call
$('#myfavcell').append(htmlToAppend);
as jquery uses the css selector type (#) for locating element IDs.

How to get attributes of container in jquery?

How can I get attributes values from an container using jquery ?
For example:
I have container div as:
<div id = "zone-2fPromotion-2f" class = "promotion">
here how can I get attribute id value using jquery and than how can I trim the value to get component information ?
update : how can i get attribute values ?
UPDATE: If I have multiple components on page with same div information than how would I know what attribute value is for which component ?
Thanks.

First, that seems to be a ridiculously long ID -- I'm sure it could be made much shorter while still retaining its uniqueness.
Anyway, on to the answer: First you need a way of accessing your "container" div. Typically, one might use a class or ID to get an element. For example, you could "select" this div with the following call to jQuery:
var container = jQuery('#zone-3a...'); // Fill in ... with really long ID
But, since you're asking how to retrieve the ID, I'm presuming that selecting it via the ID is not an option. You could also select it using the class, although it's not guarenteed to be the only element on the page with that class:
var container = jQuery('.promotion');
There are other ways to narrow down the search, such as:
jQuery('div.promotion');
jQuery('div.promotion:first');
Once you have a reference to your "container", you can retrieve the ID like so:
container.attr('id'); // => zone-3a...
// or:
container[0].id; // => zone-3a...

So assuming your div looks like this.
<div id="foo"/>
You could get the ID attribute by using the attr method.
$("div").attr("id);
That assumes that you only have one div on the page. Not really sure what component information you are looking to get?

You read node attributes with the attr() method.
var id = $( '.promotion' ).attr( 'id' );
In terms of parsing that ID for any other arbitrary information, I can't say since it looks like you're using some sort of proprietary format of which I have no knowledge.

loop thru and get all divs with the class promotion and get the id of each...
$('div.promotion').each(function(){
var attr = $(this).attr('id'); // or whatever attribute
});
or single
var myDivClass = $('zone-3a-2f-2f-2fPortal-2fPages-2fHome-2fZones-2fLeft-2f-7ccomponent-3a-2f-2f-2fSpm-2fComponents-2fPromotion-2f').attr('class');
or another single
var myDivID = $('.promotion').attr('id');