jQuery how to replace all contents of an element into another? - javascript

Say I have 3 elements like below with different html contents:
<div id='result1'> <p>One</p> </div>
<div id='result2'> <p>Two</p> </div>
<div id='result3'> <p>Three</p> </div>
How can I copy just contents within the div element to the next one so that the final result looks like this?
<div id='result1'> <p>New content</p> </div>
<div id='result2'> <p>One</p> </div>
<div id='result3'> <p>Two</p> </div>
There will be new content for replacement and the last content can be discarded.
To clarify, I'll have something like:
<div id='new'> <p>New content</p> </div>
where I want to grab '<p>New content</p>' as new content to use.
What do you think?

To push the content down, reverse the collection and set the HTML to the HTML of the previous one.
var elems = $($('[id^=result]').get().reverse());
elems.html(function(i) {
return elems.eq(i+1).html();
}).last().html('New Content');
FIDDLE

You can use .html() on the element you want to change the content. For accessing particular element you can use ID Selector (“#id”) with Child Selector (“parent > child”).
Live Demo
$('#result1 > p').html('New content');
Edit to move contents to next elements you can iterate through all elements and start assigning the context of second last to last, third last to second last and so on
Live Demo
elements = $('[id^=result] > p');
len = elements.length;
elements.each(function(idx, el){
if(idx == elements.length-1) return;
$('#result'+ (len-idx) + ' p').html($('#result' + (len-idx-1) + ' p').html());
});
$('#result1 > p').html('New content');

try JS fiddle
I am suggesting to add a Parent Grid and use jquery first() and last(), These controls will function like a queue.
$('#Pdiv').children().last().remove();
$('#Pdiv').first().prepend("<div id='new'> <p>I am New One</p></div>");
alert($('#Pdiv').children().first().html());

Related

javascript replace node and all of it childs with anothe code

How can you replace HTML tag with all tags branching inside using Javascript with other HTML code?
example:
<div class="a">
<div class="sub-a1">
<div class="sub-a12">
</div>
</div>
<div class="sub-a2">
<div class="sub-b">
</div>
</div>
I wanna replace all tags from tag div class 'a' including all sub nodes with another code.
is that's possible?
please help me.
const target = document.querySelector(".a");
target.innerHTML = //place your html here as string
Yes, this is possible. If you want to keep the div.a elements and just change the "subnodes" you have to use innerHTML in stead of outerHTML.
const divs = [...document.getElementsByClassName("a")]; //make a copy of the HTML collection so that they can be removed without being removed in the array
const newElement = "<h1>Replaced Element</h1>"; //this is your replacement element
for (let i = 0; i < divs.length; i++) { // loop through all the divs
divs[i].outerHTML = newElement; // set the outer html for the div to the replacement elemzent
}
You can do with .replaceWith() with a valid HTML code.
function replace() {
var para = document.createElement("P"); // Create a <p> element
para.innerText = "This is a paragraph"; // Insert text
document.querySelector(".a").replaceWith(para);
}
<div class="a">
<div class="sub-a1">
<div class="sub-a12">
<h4>Sample content1</h4>
</div>
</div>
<div class="sub-a2">
<div class="sub-b">
<h4>Sample content2</h4>
</div>
</div>
</div>
<button onclick="replace();"/>Click to Replace</button>

jQuery select another element with certain class in same parent

let say i have this div
<div id='parent'>
<button id='button'></button>
<div id='child'>
<div id='grandchild' class='lookAtMe'>
Some JSON text
</div>
</div>
</div>
I wanted to give the #button an on click event that returned the text at #lookAtMe div, specific to the div whom it shares parent/grandparent (in this case, the #parent div)
I tried using:
$("#button").on("click",function(){
var ReturnedText = $(this).parent(".lookAtMe").text();
console.log(RetrunedText);
});
But the console log would retruned (empty string).
Where did i do wrong? please help. Thankyou very much.
Because there is n o parent with that class. You need find().
Actually you need to write
var ReturnedText = $(this).parent().find(".lookAtMe").text();
$("#button").on("click",function(){
var ReturnedText = $(this).parent().find(".lookAtMe").text();
console.log(ReturnedText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
<button id='button'></button>
<div id='child'>
<div id='grandchild' class='lookAtMe'>
Some JSON text
</div>
</div>
</div>

How to dynamically append text to a modal?

I have this html
<div class="col-md-6">
<div class="jumbotron">
read more...
<div class="read-more hidden">
<p>1 - THE TEXT I NEED TO APPEND TO THE MODAL</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron">
read more...
<div class="read-more hidden">
<p>2 - THE TEXT I NEED TO APPEND TO THE MODAL</p>
</div>
</div>
</div>
This is the section of the modal where I need to append the text within the element with the class read-more
<div class="modal-body">
<!-- TEXT FROM THE READ MORE CLASS ELEMENT NEEDS TO BE APPENDED HERE -->
</div>
And this the jQuery function I have so far where I am adding a data-attr for every element with the class read-more:
jQuery(document).ready(function($) {
var $readmore = $('.read-more');
var $readmoreParagraph = $('.read-more p');
$readmore.each(function(i, el) {
var $dataAttr = $(el).attr('data-attr', i);
});
});
To get this output:
<div class="read-more" data-attr="0">
<p>THE TEXT I NEED TO APPEND TO THE MODAL</p>
</div>
TL;DR:
I need to append to the modal-body the text on the <p> under the div with the class read-more.
Any suggestions?
UPDATE
I did this:
$('#myModal .modal-body').append($("[data-attr="+i+"] > p"));
But as a result I am getting this in the modal-body:
1 - THE TEXT I NEED TO APPEND TO THE MODAL
2 - THE TEXT I NEED TO APPEND TO THE MODAL
Use the show.bs.modal event to change the contents of the body each time it is shown.
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget), // Button that triggered the modal
content = button.siblings('.read-more').html(),
modal = $(this);
modal.find('.modal-body').html(content);
});
See http://getbootstrap.com/javascript/#modals-related-target
From what I understood after the comments, I suggest the following:
After triggering the modal, get the content of the read-more you would like, and just use that text and place it at the modal (not appending, an append adds to the object).
Like this (example for the id 1):
$('#myModal .modal-body').html($("[data-attr=1] > p").text());

jQuery - How to find an index of an ID within another container DIV?

I thought to use .index but it don't seem to work!
<div id="main">
<div id="one">
<div class="red"> ... </div>
</div>
<div id="two">
<div class="green"> ... </div>
</div>
<div id="three">
<div class="blue"> ... </div>
</div>
</div>
So I tried:
var isDivThere = $("main").index("#two") != -1;
but as mentioned, no go...
How can I simply look up a div inside div #main?
$("#main > div").index($("#two"))
var isDivThere = $("#main > div").index($("#two")) != -1;
Note: > is for filter only first level div's. So my solution will not work if you want to check the index of nested divs.
To check for existence, you can simply do this:
var isDivThere = !!$('#two').length;
If #two must exist inside #main:
var isDivThere = !!$('#main').find('#two').length;
If #two must be a child of #main:
var isDivThere = !!$('#main').children('#two').length;
To know the index of an element within its container just invoke index over the element id your are looking for:
var isDivThere = $("#two").index();
http://jsfiddle.net/NGhL7/
You need to add the # symbol for selecting by id. Working fiddle here:
$("#yourId");
http://jsfiddle.net/nnFh5/
You can use find() function of jquery,
$("#main").find("#two");
$Because the ID is unique within the all body this is enough to do what you do:
var isDivThere = !!$$("#two").length;
you will never find another element with an ID="two" so you have no need to identify that telling that is insode the main div

get outer div by id, then get inner div by class

First I want to get the outer div by id, then the inner div by class (dynamically added by jquery mobile ui-collapsible content) and finally append a child text node to it.
<div id="aab" data-role="collapsible" data-content-theme="c">
<h3>Heading</h3>
<div class="ui-collapsible-content">
<div id="coll">
Collapsible Content
</div>
</div>
</div>
<p><button onclick='func()'>Button</button></p>
<script>
function func() {
var section = $("#aab > .ui-collapsible-content");
section.appendChild(document.createTextNode("Hello world!"));
}
</script>
I also tried things out with document.getElementById but somehow it doesn't work.. Thanks in advance!
You have use jquery for selection so you should use it for adding child
function func() {
var section = $("#aab > .ui-collapsible-content");
section.append("Hello world!");
}

Categories