I need to clone a div with its children, I know the clone() function in jQuery, but I need to change the style of the parent div, or change the id name or show the whole div by animate, is there any way to do this?
This is the div I need to clone and I need to change the top attribute
<div class="news">
<div class="meta-inform">
<div id="waiting">not accepted</div>
<div id="accpted">accepted</div>
<div class="edit">
<div class="editedBy" id="editedBy" >
<div id="editLabel" style="display:inline">edited by</div>
<div id="editorName" style="display:inline">arvin</div>
</div>
<div id="editTime" class="editTime">
<div id="editDate" style="display:inline" >چdate</div>
<div id="editDate" style="display:inline">time</div>
</div>
</div>
</div>
<div id="littleNews">
<div id="number">1000</div>
<div id="divider1"></div>
<div id="title">title</div>
<div id="divider2"></div>
<div id="littleNewsTime">time</div>
<div id="littleNewsDate">چdate</div>
<div id="divider3"></div>
<div id="category">cat</div>
<div id="part">part</div>
<div id="segment">sgmnt</div>
<div id="divider4"></div>
<div id="writer">writer</div>
<div id="view">view post</div>
</div>
<div class="functions">
<div id="edit">edit</div>
<div id="delete">delete</div>
<div id="accptThis">accept</div>
</div>
</div>
Use clone to clone the div with its children.
Use the attr function to change attributes.
Use the css function to change css attributes.
e.g.:
$('.news').clone().attr("id","whatever").css("width","50px")
Then for example, you can append it to any other container you want.
e.g.:
$('.news').clone().attr("id","whatever").appendTo($('body'));
You can also use addClass or removeClass to add/remove classes defined in your CSS files.
does that help?
You could just add new class name and then add proper styles into css, for example:
$('.news').clone().addClass("clone");
And to the css sheet:
.clone {
top: 100px;
}
$('.news').clone().attr("id","elementid").appendTo("body").animate({ 'top': '200px'}, 2000);
Related
Hi I want to add a sub parent class to my parent class using jQuery.
Previously I've tried this:
$('.my-parent').wrap('<div class="my-sub-parent"></div>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-parent">
<div class="child-items">1</div>
<div class="child-items">2</div>
<div class="child-items">3</div>
<div class="child-items">4</div>
</div>
But this one inserts the class outside of my parent, not inside.
What I want to achieve is like this html structure:
<div class="my-parent">
<div class="my-sub-parent">
<div class="child-items"></div>
<div class="child-items"></div>
<div class="child-items"></div>
<div class="child-items"></div>
</div>
</div>
Is this achievable? Any help would be great. Thanks.
You need wrapInner function.
$('.my-parent').wrapInner('<div class="my-sub-parent"></div>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-parent">
<div class="child-items">1</div>
<div class="child-items">2</div>
<div class="child-items">3</div>
<div class="child-items">4</div>
</div>
For more resources.
https://api.jquery.com/wrapinner/
Would be very easy to embed the missing div container in the html ...if I only could add it. I'm limited to "jimdo's" head area to manipulate classes and id's from there. Code is already written but it seems to me the only way that works is to do that with jQuery or Javascript?
So, I have this code here:
<div id="1" class="2">
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
And the missing div container in the html <div class="margin"> needs to be under the first div container from top <div id="1" class="2"> added by its id #1 and then surrounds the rest code below into the new added <div class="margin">
Like this:
<div id="1" class="2">
<div class="margin">
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
</div>
Is it possible to add it like that with jQuery or javascript? If so, maybe someone could show me how to implement this?
You can try $.before() to append the <div class="margin"> before the target:
const $container = $("#cc-m-7032876518");
$container.before(`<div class="margin">`);
You can try this with jquery.
let children = $("#1").clone().children().wrap( "<div class='margin'></div>" );
$("#1").empty().append(children);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="2">
<div class="margin">
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
</div>
Here i have HTML structure and the same structure may repeat number of times with the same class names. what i'm trying to do is once i click on the .innerDiv i should be able to access the attr value of the .inid close to its parent element.
here is what i have tried, but its not working. i also tried adding the classname to the element i'm trying to get the value from. but its adding the class to all the element with .inid. how can i do this?
HTML
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
Jquery
$(this).on('click',function(){
$('.innerDiv').parents().find('.inid').addClass('testclass');
$('.innerDiv').parents().find('.inid').attr(data-attr);
});
To achieve expected result, use index of innerDiv and add class-testclass to element with class- inid
Find index of clicked innerDiv using index('.innerDiv)
Use that index to add class using eq
Add some sample css to testclass for testing
Syntax error in your code - closing quotes missing for class- second-most-innerdiv
Codepen - https://codepen.io/nagasai/pen/
working example
$('.innerDiv').on('click',function(){
$('.inid').eq($(this).index('.innerDiv')).addClass('testclass');
console.log($('.inid').eq($(this).index('.innerDiv')).attr('data-attr'))
});
.testclass{
background: red;
height: 10px;
width:10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv">
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
Using JQuery closest() feature to find the parent div, then find the element with class "inid" within that parent element and get the value of the attribute.
$('.innerDiv').on('click',function(){
var inid = $(this).closest('.parent_div').find('.inid');
inid.addClass('testclass');
console.log('selected -> ' + inid.attr(data-attr));
});
Source: https://api.jquery.com/closest/
The content of the divs is going to be populated with javascript json. Now, I know how to select a div in javascript:
var hsc = document.getElementByID("hsc");
But how would I refer to eg. the title but only in the hsc div.
<div id="hsc">
<div id="title"></div>
<div id="jobs"></div>
...
</div>
<div id="cc">
<div id="title"></div
<div id="jobs"></div>
</div>
On a separate note, wouldn't 'title' and 'jobs' be better classified as classes, and not ids?
This would work:
var hsc = document.querySelectorAll("#hsc > .title");
But you need to change to valid html and use unique IDs and classes instead:
<div id="hsc">
<div class="title"></div>
<div class="jobs"></div>
...
</div>
<div id="cc">
<div class="title"></div>
<div class="jobs"></div>
</div>
IDs must be unique in HTML.
Change them to classes, and then you can use querySelector() to target them:
document.querySelector('.hsc .title').style.color= 'blue';
document.querySelector('.cc .title').style.color= 'red';
<div class="hsc">
<div class="title">Make me blue!</div>
<div class="jobs">Jobs</div>
</div>
<div class="cc">
<div class="title">Make me red!</div>
<div class="jobs">More jobs</div>
</div>
Just try
<div id="hsc">
<div id="a" class="title"></div>
<div id="b" class="jobs"></div>
...
</div>
<div id="cc">
<div id="c" class="title"></div
<div id="d"class="jobs"></div>
</div>
Because your HTML code is invalid because the id is already taken.
How would I use jQuery to get get the text from the rating selected div within the id=overall answer div?
I want to dynamically fetch the text "TESTING" from that div within the overall parent div.
<div class='answer' id="overall">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating'>4</div>
<div class='rating selected'>TESTING</div>
</div>
<div class='answer' id="effort">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating selected'>4</div>
<div class='rating'>TESTING</div>
</div>
I tried to do this and it is blank.
$(document.getElementById('overall')).find('.rating selected').text();
Your code would work but your selector is wrong. It would be...
$(document.getElementById('overall')).find('.rating.selected').text();
Notice the dot and no space between rating and selected.
However, I think you are over complicating things...
$('#overall .selected').text();
Example...
alert($('#overall .selected').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='answer' id="overall">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating'>4</div>
<div class='rating selected'>TESTING - selected</div>
</div>
<div class='answer' id="effort">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating selected'>4</div>
<div class='rating'>TESTING - not selected</div>
</div>
$('#overall .rating.selected').html()