I need to add the value into the span using dom. But now i am using string manipulation. how to change this into the dom or append the value . i need to get the return value in html formate using dom.
Define layer.id as some text and this will get replace in all span element content
$.each($("span"),function(){
$(this).html(layer.id);
});
Thanks
You can append like following :
$('.ClassName').append('<p>Test</p>');
$('#id').after('<p>Test</p>');
$('#id').before('<p>Test</p>');
Try with this:
$("<li class='" + liClass + "'>" + preElement +
"<label for='" + layer.id + "'>" + layer.name + "</label>").appendTo('ul.class');
//----------^^^^^
// use the id
// or class of
//the specific ul
use appendTo() instead return and append it to your element.
(as i see you are returning li then append it to the ul)
Related
The queryString to find all the input elements with ID ends with '-0', '-1' etc ..
the below code works fine
var queryString = ':input:focusable[id$="-' + index + '"]';
I also want to find the div elements ending with the same scenario .. How i can change the query ??
You can use comma to add additional selectors:
var queryString = ':input:focusable[id$="-' + index + '"],div[id$="-' + index + '"]';
make it
var queryString = ':input:focusable[id$="-' + index + '"], div[id$="-' + index + '"]';
Using comma , you can add selectors to the same query string.
Edit
but the select element am having present inside the div element and
the div element has the ID
try this
var queryString = 'div[id$="-' + index + '"]:input:focusable';
I want to bind my image to the div tag.it bind only to the first object and not
all.
I stored images in azure blob storage.
type: "Get",
url: "/contollerName/methodname",
success: function (result) {
data = JSON.parse(result);
alert("Pic " + data.ContentType +" "+data.Content);
$('#MyProfile').attr('src', "data:" + data.ContentType + ";base64," + data.Content);
this methods gives me image.and the same id i.e MyProfile I am using for div tag
You are referencing the divs by ID. In valid HTML you must only use a ID once per page. Change it to class and reference it in jquery. Although a div has no src attribute, but you want to reference an image:
<div class="profilePic"><img src="value.png"/></div>
The jquery part:
$('.profilePic img').attr('src', "data:" + data.ContentType + ";base64," + data.Content);
First of all, use a class instead of ID like $('.bindImage').attr(...).
Second one, you get multiple elements back, so you need to go through them:
var elements = $('.bindImage');
elements.forEach(element, index) {
element.attr('src', "data:" + data.ContentType + ";base64," + data.Content);
}
Do not use ID selector for multiple element!
var $profiles = $('.MyProfile');
$profile.forEach(element, index) {
element.attr('src', "data:" + data.ContentType + ";base64," + data.Content);
}
css id selector (#MyProfile) only returns the first element it finds on the page since ID selector should be unique on the page. It seems like you actually want to use class selector (.cssClassHere)
I have a div and i want to get text of a specific span from that div.
Following is my Div code:
'<div class="dvDynamic_' + pid + '"><p hidden="true">'+pid+'</p><span class="count_' + pid + '">' + count + '</span><span id="pname" style = "margin-left:70px;">' + pname + '</span><span id="punitprice" style = "margin-left:150px;">' + uprice + '</span></div>'
and i want to get text of the following span:
<span class="count_' + pid + '">' + count + '</span>
Please help me how to do it .
The span element which you want to target have next sibling with id. you can target that element using id selector and traverse to required span using .prev():
$('#pname').prev().text()
If you know the pid of the span you want to get, you can use
$('.count_' + pid).text()
You can identify pname element using ID selector then use .prev() to identify the desired span
$('#pname').prev().text()
Using find you can get value of span through div
function findSpanValue(pid){
return $(".dvDynamic_"+pid).find(".count_"+pid).text();
}
Get span element to target have next sibling with id. you can get that element using id selector and traverse to required span using .prev():
$('#pname').prev().html();
or
$('#pname').prev().text();
I am bringing a big html string inside an ajax call that I want to modify before I use it on the page. I am wondering if it is possible to edit the string if i store it in a variable then use the newly edited string. In the success of the ajax call this is what I do :
$.each(data.arrangement, function() {
var strHere = "";
strHere = this.htmlContent;
//add new content into strHere here
var content = "<li id=" + this.id + ">" + strHere + "</li>";
htmlContent is the key for the chunk of html code I am storing in the string. It has no problem storing the string (I checked with an alert), but the issue is I need to target a div within the stored string called .widgteFooter, and then add some extra html into that (2 small divs). Is this possible with jquery?
Thanks
Convert the string into DOM elements:
domHere = $("<div>" + strHere + "</div>");
Then you can update this DOM with:
$(".widgetFooter", domHere).append("<div>...</div><div>...</div>");
Then do:
var content = "<li id=" + this.id + ">" + domHere.html() + "</li>";
An alternative way to #Barmar's would be:
var domHere = $('<div/>').html( strHere ).find('.widgetFooter')
.append('<div>....</div>');
Then finish with:
var content = '<li id="' + this.id + '">' + domHere.html() + '</li>';
You can manipulate the string, but in this case it's easier to create elements from it and then manipulate the elements:
var elements = $(this.htmlContent);
elements.find('.widgteFooter').append('<div>small</div><div>divs</div>');
Then put the elements in a list element instead of concatenating strings:
var item = $('<li>').attr('id', this.id).append(elements);
Now you can append the list element wherever you did previously append the string. (There is no point in turning into a string only to turn it into elements again.) Example:
$('#MyList').append(item);
I am retrieving the value of html tag in a JavaScript function, but right now if I wanted to retrieve the data attribute value of html and pass it in a JavaScript variable.
How can I do it?
// create a UL element
var ul = $('<ul></ul>');
// add some LI elements
ul.append(
$('<li class="bear" data-type="panda">panda bear</li>'),
$('<li class="bear" data-type="koala">koala bear</li>'),
$('<li class="wallaby" data-type="kangaroo">kangaroo</li>')
);
// this won't work because our UL is not in the dom yet
console.log($('.bear').length); //=> 0
// let's just pick the bears in our UL using our UL as the context
var bears = $('.bear', ul);
console.log(bears); //=> [li.bear, li.bear]
// lets loop through and see data attributes
bears.each(function() {
console.log($(this).attr('data-type'));
});
//=> "panda"
//=> "koala"
I think the problem is you are not using string concatenation here
statusHtmlArr.push('<li class="loc-li" data-test="' + rowData.APPT_LOC_QUAL[k].LOCATION_CD + '" value="' + rowData.APPT_LOC_QUAL[k].LOCATION_CD + '"><a class="sub-detail" href="Javascript:void(0);">' + rowData.APPT_LOC_QUAL[k].LOCATION + '</a></li>');
You can do:
var locID = $("li.loc-li")[0].data("test");
In order to retrieve an attribute of an element, it's easy by using jQuery.
$('#selectorId').attr('attribute name')
or
$('.className').attr('attribute name')