We Keep Coding

Not Able to Select a Class With Parent Specification in Vanilla JavaScript

Can you please let me know how can I get this done in vanilla JavaScript? I am able to select the .pay-plan-price text which it's parent has active class like this in jQuery
var fee = $('.plan-box.active .pay-plan-price').text();
But I need to do same select in core js format. I tried this
var fee = document.getElementsByClassName('.plan-box.active .pay-plan-price');
console.log(fee)
but in return I am getting HTNLCollection instead of the text of .pay-plan-price which has parent .plan-box.active

You can use document.querySelector to select an element using a similar selector as jquery accepts:
document.querySelector('.plan-box.active .pay-plan-price');
And then of course you need to get a text from that element, so use also textContent or innerText property on the returned element.
Example:
var fee = document.querySelector('.plan-box.active .pay-plan-price').textContent;
console.log(fee);

jquery selecting div id within div id

Through jquery I am trying to target a div with an id within a div container with a different id. Example:
<div id="container-type-a">
<div id="inner_number_2201"></div> //<<<< this id is a passed dynamic ID and changes. Its passed into the function.
</div>
So I would want to do something like document.getElementById('> container-type-a' > 'inner_number_' + id + )
but this is not the right syntax. Can something like this be done?

ID should be unique in the HTML, so unless your HTML is malformed, you should be able to just
document.getElementById(id_In_Restaurant)

If you want to use a selector, you would use querySelector
var inner = document.querySelector("#container-type-a #inner_number_" + id_In_Restaurant);
But since ids are supposed to be unique, it makes no sense to use two ids. Just been to use getElementById
var inner = document.getElementById("inner_number_" + id_In_Restaurant);
Getting a reference to the parent element
var inner = document.getElementById("inner_number_" + id_In_Restaurant);
var innersParent = inner.parentElement;

Since Id is unique throughout the document so you can use the following syntax
$('#inner_number_' + unique_dynamic_id)
This will return you the jquery object of the element.

You can use below code if your dynamic div is direct decedent.
$('#'+$('#container-type-a >div').attributes.id.value)

How to get the id of telerik element in the javascript?

How can i access telerik elements id in my javascript. I tried using
$find("<%=radcontrol.ClientID%>").
But it is not working for me.

you can try something like this ,
var radControl = $telerik.$("[id$='RadEditor1']").attr("id");
radControl = "#" + radControl;// here you 'll get the id telerik of element
$telerik.$(radControl).hide(); //like this you can access it
$= in a jquery selected means the ID of the element must end with the provided string. In this case "RadEditor1"

Storing data in html dynamically (html5)

I am creating a dynamic div in html which consists of multiple checkboxes. All these checkboxes and divs are being dynamically added to the html. I need to store some data about each div in the html to be accessed by javascript later. Can anyone show me an example where data can be added and retrieved dynamically in a div? I know HTML5 allows it and there are some other hacks to do it, but I am having trouble with syntax I guess.

Try to do it using JavaScript:
SomeClass.someVariable = document.getElementById('divid');
Otherwise if you mean to access custom data that has to used as attribute in your HTML tags then use
data-XXX = 'YYY';
And access it with JS:
document.getElementById('divid').dataset.XXX;

This post explains data-* attributes.
You can create custom attributes within your divs like this:
<div id="div1" data-text="Hello. This is a custom attribute."></div>
Notice the data- prefix. this is absolutely necessary.
Then (using jQuery) you can access the custom attribute:
$('#div1').data('text'); => "Hello. This is a custom attribute."
So using this you can do stuff like:
if($('#div1').data('text') != "FreddieBobman"){
alert("HI!");
} else {
alert("Forever Alone!");
}
The above example will alert "HI!" because $('#div1').data('text') does not contain
FreddieBobman, it is in fact "Hello. This is a custom attribute."
To create these attributes use the following:
$('#div1').attr('data-name', 'value');
Our div with id of div1 now has another attribute, data-name, and the attribute has a value of value. Of course, you can change the value of attributes as well:
<div id="div1" data-text="Hello. This is a custom attribute."></div>
<script src="jquery.js"></script>
<script>
(function(){
$('#div1').attr('data-text', 'This is cool.');
}());
</script>
Now the div has data-text equal to "This is cool.", not "Hello. This is a custom attribute."

It is Obtain by the data attributes that you add dynamically to the elements ,And retrieve when you want !
SET Attribute :
var div = document.createElement('div');
div.setAttribute('data','my_data');
div.innerHTML = "I am a div";
document.body.appendChild(div);
GET Attribute :
div.getAttribute('data')
WORKING DEMO

you can use attributes for your html tags. Also, in html5 you can also use custom attributes

What you want is to add or retrieve data from div tags dynamically?
Using javascript function you can simply get corresponding div element using its id,
var container = document.getElementById('your_element_id');
Then you can add what you want.
var stringToAdd = "<p>something you want to add</p>";
container.innerHTML = stringToAdd;
Also you can use a different class with different features and set it as your div class.
you need to add your features inside style tag under your class name. Then,
var elementID = document.getElementById(ID);
elementID.className ="your_new_class_name";
or you can set attributes for your tag.
elementID.setAttribute('display','inline');
Using jquery with javascript,
var elementID = document.getElementById(ID);
$(elementID).replaceWith( "<p>something you want to replace</p>" );
using class name or id you can dynamically append content using,
var stringToAdd = "<p>something you want to add</p>";
$(".your_class_name").append(stringToAdd);
also you can remove whole element using,
$(elementID).remove();

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');