javascript JQuery printing to multiple divs on page load? - javascript

I basically have several divs each with ids "id_1", "id_2" "id_3" etc. The divs are all initially empty.
I want on page load to populate all the divs with certain html content. But the part that has been troubling me is that I also need to extract the unique id portion for use within the html:
<div id="id_3">
<div id="inner_3></div>
</div>
where the inner div is what gets printed. Notice that the '3' is extracted from the container div id by the javascript and then subsequently used and printed in the inner div.
Any ideas how to do this with jquery? Thanks in advance.

You can fetch all the div elements that have an id that starts with a certain string:
$(function() {
$('div[id^=id_]').each(function() {
var id = $(this).attr('id').split('_').pop();
$(this).html(
$('<div/>').attr('id','inner_' + id)
);
});
});
Then you loop through each, get the id, and do your HTML manipulation.

there are several ways of doing this, but in the end its just simple string manipulation. Here is an example:
// on page load
$(function(){
//find all divs and iterate through them - you can use any selector you like
$("div").each(function(){
//this gets the id attribute of the div we are currently on in the loop
var id = $(this).attr("id");
//this gets the number at the end - notice that its just string manipulation
var nid = id.slice(id.lastIndexOf("_") + 1)
//create inner div, give it an id and append
var innerDiv = $('div').attr("id", "inner_" + nid);
$(this).append(innerDiv);
//all done - you can append content to inner div here
// innerDiv.append(someContent);
});
});

Related

How to find earlier element by partial id

I trying to find the parent div of a clicked item but can only get it working by manually setting the div id. There are many similar divs with incrementing id's
<div id="grid0"...
<div id="grid1"...
<div id="grid2"...
etc
My javscript is as follows but this only finds the first grid
function popUp1HtmlContent(e) {
var dataItem = $("div[id^=grid]").data("kGrid").dataItem(e.target.closest("tr"));
var content = dataItem.PopUp1Html;
return content;
}
How do I find the parent div in this function?
Eg setting this manually works for each grid
var dataItem = $("div[id=grid0]").data("kGrid").dataItem(e.target.closest("tr"));
var dataItem = $("div[id=grid1]").data("kGrid").dataItem(e.target.closest("tr"));
etc
Is there a way to search back through the parents to find the first matching div with id starting "grid{0}"?
The event fires from an image within a td element. Also it's not always the direct parent but can have varying number of elements between clicked element and div I'm trying to locate.

How to get reference to a dynamically added element?

The following code is intended to insert a <p> element into the DOM before an already existing <p> element and then insert a table below the newly inserted <p> element (so that the table appears between the two <p> elements):
$("#para1").before("<p id = 'para2'>" + printDate + "</p>");
$("#para2").after("<table id = 'table'></table>");
However, when I try to add a row to the newly inserted table, like so:
$("#table").prepend("<tr><td>asdfasf</td></tr>");
the row always gets added to a different table (with a diffrent id) that sits before the <p> element with id para2. What could be the reason for this strange behaviour?
This is a snapshot of the DOM inspector. How can the table with id 21-09-2014 be in two different places?
EDIT:
You were all correct. I had added an empty table with the same id earlier and thought it wasn't there because I couldn't see it. That brat cost me 5 hours of billable work!
The main problem for adding the entry to a different table might be duplicate ids in your page. If here are duplicate ids, the id selector will return the first element with the id.
To get the reference to newly added element use .insertBefore() and insertAfter() instead of before() and after() respectively.
var $para = $("<p id = 'para2'>" + printDate + "</p>").insertBefore('#para1');
var $table = $("<table id = 'table'></table>").insertAfter('#para2');
$table.append("<tr><td>asdfasf</td></tr>");
You're trying to prepend to a table? Shouldn't you use
$('#table tr:last').after('<tr><td>asdfasf</td></tr>');
instead?
or :first and before?
$("#para1").before("<p id = 'para2'>The new p element with Id='para2' </p>");
$("#para2").after("<table id = 'table'><tr><td>The second row</td></tr></table>");
$("#table").prepend("<tr><td>new row inner #table and it will be the first row</td></tr>")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table-with-diferent-id">table with diferent id that already exist</table>
<p id="para1">para 1</p>

jquery - having the selector change all appropriate attributes and not just the first one found

I had a basic question on the jquery selector.
$(function () {
$('.grid').hover(function(){
var divId = $(this).attr("divId");
var $this = $('#' + divId);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
});
});
If I were to hover on a div with the class="grid", how can have all the divs as found by var $this = $('#' + divId); change their imgs? Meaning, when this function executes, only the first div with the appropriate id has it's img src change. I would like it so that all the divs with that appropriate id (attribute) change rather than the first one change.
Also, I would appreciate any help with where I could modify this so that when the img changes it's fades in 'slow'.
Thanks.
The specific difference between an ID and a Class attribute is that IDs are expected to always be unique, whereas classes are intended to be used to identify a group of elements which share a common grouping. If you have multiple elements with the same ID, you are using HTML incorrectly. By rewriting your code such that each element has a unique ID, you can count on those IDs identifying the specific element they're associated with and then give groups of elements which you want to select together a specific class, which is the appropriate way to select a group of elements like you're trying to.

Javascript: appendchild append div not working

i want to dynamically add div element to my page.searching around including Stackoverflow gives me this sample code:
var main = document.getElementById('MasterContainer'); //manually defined div with this id
var div = document.createElement('div');
div.setAttribute("id","container1");
main.appendChild(div);
note: its inside a document.ready function.
and the result does not contain container1 div.
The code should be fine, check if the element with id #MasterContaienr is on the page and the name has been write well

jquery .each() loop

i want to read all links in ".vm-video-title"-divs and post them each in the same div. So i made this script:
$('.vm-video-title').each(function(i) {//all divs
$(this).html($(this).html()+$("div.vm-video-title>a").text());//add to div the link
});
but i have the problem that it reads ALL the links of all divs and put them in one div.
example:
<div class="vm-video-title">Text1</div>
<div class="vm-video-title">Text2</div>
<div class="vm-video-title">Text3</div>
output:
Text1Text1Text2Text3
Text2Text1Text2Text3
Text3Text1Text2Text3
wanted output:
Text1Text1
Text2Text2
Text3Text3
You can select the <a> elements directly, and use the after()[docs] method to append the content of each after each one respectively.
$("div.vm-video-title > a").after(function() { return $(this).text(); });
This doesn't do a "destroy then recreate" of the existing elements like the html()[docs] method will.
Working example: http://jsfiddle.net/CCr9C/
This should do the job for you,
you need to find the div inside current element in the loop (el).
$('.vm-video-title').each(function(i, el) {
el = $(el);
el.html(el.html()+el.find("a").text());
});
in your code you are adding text() of all matching "a" tags in your divs (i.e. Text1Text2Text3)
You were almost there. Instead of : $("div.vm-video-title").text(), which gives you text inside any div with class vm-video-title, you need to find a tag inside current div and get text from it. We pass this as context for selecting a inside current div jQuery( selector, [context] )
$('.vm-video-title').each(function(i) {//all divs
$(this).html($(this).html()+$("a", this).text());
});

Categories

Resources