I have a div with the ID wrapper, and I am using .append() to insert some content at the end of that div, like this:
$("#wrapper").append('<div class="content"><div class="subcontent">Some stuff</div></div>');
However, I also want the option to insert a new child before the last content div in the wrapper.
So if the HTML output looks like this:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
I want to insert an element before the last one, so I get this:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Third
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
How would I do this?
You could use .before() to add a sibling before the element:
$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');
.insertBefore() does the same thing with a different syntax, namely that you select the element to be added, and pass the element you want to add it before.
$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
You can use insertBefore():
$('<div class="content"><div class="subcontent">Some stuff</div></div>').insertBefore('#wrapper > div:last');
Or before():
$('#wrapper > div:last').before('<div class="content"><div class="subcontent">Some stuff</div></div>');
This is how I got there:
http://jsfiddle.net/lharby/00tk6avg/
var htmlString = '<div class="subcontent">Some stuff</div>';
$(htmlString).insertBefore('.content div:last');
Select the last element with :last-of-type and use before() to append the new element:
$('.content:last-of-type').before('<div class="new">test</div>');
.new { color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
Use insertBefore:
$('<div class="content"><div class="subcontent">Third</div></div>').insertBefore('#wrapper .content:last');
Insert every element in the set of matched elements before the target.
Demo: http://api.jquery.com/insertBefore/
$( "<p>Test</p>" ).insertBefore( "#wrapper > div:last-child" );
You can last() for selecting last item, and before() for appending
$("#wrapper .content").last().before('<div class="content"><div class="subcontent">Some stuff</div></div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class=" content ">
<div class="subcontent ">
First
</div>
</div>
<div class="content ">
<div class="subcontent ">
Second
</div>
</div>
</div>
you can use nth last child to select the second last div.
fiddle:
http://jsfiddle.net/08ta9wnL/
html:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
javascript:
$(document).ready(function(){
$("#wrapper div:nth-last-child(2)").append('<div class="content"><div class="subcontent">Some stuff</div></div>');
});
You can do like this
$("#wrapper .content:last").before("<div class="content"><div class="subcontent">Some stuff</div></div>");
Have a look at fiddle https://jsfiddle.net/48ebssso/
Related
Sample:
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
</div>
When i click "column_expand_list" i need to find closest "element". I have a function, but I don't understand why it doesn't work:
console.log($(this).parent().parent().closest('.element'));
What am I doing wrong?
In your HTML there is no closest element with the class element. You can get the closest .table_element and from this element you can then navigate to the next() or prev() .element
closest() only traveres the DOM in the UP direction, that's why you can't find it from the clicked element you are on.
$('.column_expand_list').on('click', function() {
console.log($(this).closest('.table_element').next('.element'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
</div>
I guess this is just a repetition od #Cloned and #AlwaysHelping's answers, but anyway, here it is:
$(".column_expand_list").click(function(){console.log($(this).closest(".table_element").prev()[0])})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X this will not find a suitable "parent"</div>
</div>
<div class="element">YAY 1</div>
<div class="table_element">
<div class="column_expand_list">X click here.</div>
</div>
<div class="element">YAY 2</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
</div>
You could simply use one .parent to go back .next() to get the div.element - you are using parent twice which takes you out of the actual parent table_cover div
Using .next() like this:
$(this).parent('div').next('.element').text()
Demo:
$('.column_expand_list').click(function() {
console.log($(this).parent('div').next('.element').text());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY 1</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY 2</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY 3</div>
</div>
I have a webpage where I bind a click event on the element. When user clicks on the particular element. I want to get generate the XPath of the element starting from html or body tag. i.e "The Absolute Xpath"
Suppose in below html sample I click on span having text as "USA" so the Absolute Xpath would be
/html[1]/body[1]/div[2]/div[1]/div[1]/span[1]
<html>
<body>
<div class="header">Countries</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>India</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>USA</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>UK</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>France</span>
</div>
</div>
</div>
</body>
</html>
Do we have any library where it can help me generate the XPath where I pass the element Dom and it can generate it?
I came across few libraries but that help detect the Content inside the html based on provided Xpath.
You need to loop through clicked element and it parents to do this work. So you can call a function nesting to do this work.
var xpath;
$("*").click(function(e){
xpath = '';
addXpath($(this));
console.log(xpath);
e.stopPropagation();
});
function addXpath($ele){
var tagName = $ele[0].tagName.toLowerCase();
var index = $ele.parent().children(tagName).index($ele)+1;
xpath = '/'+tagName +'['+index+']'+ xpath;
!$ele.parent().is(document) ? addXpath($ele.parent()) : "";
}
body {background: green}
.header {background: orange}
.row_in {background: yellow}
.row_in_in {background: blue}
span {background: red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">Countries</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>India</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>USA</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>UK</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>France</span>
</div>
</div>
</div>
https://jsfiddle.net/072uwd1k/
I'm trying to change the number location to be placed above text, using insertBefore does just that but it's duplicating it for the number of divs in there.
<div class="box-wrap">
<div class="box">
<p class="text">ABC</p>
<p class="num">123</p>
</div>
<div class="box">
<p class="text">ABC</p>
<p class="num">123</p>
</div>
</div>
$('.num').insertBefore('.text');
While you have more classes num you need to use .each() and .prev() to get the previous .text element
$('.num').each(function(){
$(this).insertBefore($(this).prev('.text'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-wrap">
<div class="box">
<p class="text">ABC</p>
<p class="num">123</p>
</div>
<div class="box">
<p class="text">ABC</p>
<p class="num">123</p>
</div>
</div>
So what you need is .each() to loop through .num elements ..
$(this) to get spacific .num element and $(this).prev('.text')
to select the previous .text
for example I have this html code:
<div class="product">
<p>Name1<p>
</div>
<div class="product">
<p>Name2<p>
</div>
<div class="product">
<p>Name3<p>
</div>
<div class="product">
<p>Name4<p>
</div>
<div class="settings">
<p>SETTINGS<p>
</div>
I made settings class to display nothing in css, unless I click on one of 4 p elements in product class. After click the settings class appears at the bottom as it should be.
How should I make that if I click for example Name2 then settings class appears after Name2 and not at the bottom?
Use $(this) to target the element you clicked on, combined with insertAfter() to add the content to this element.
Run the code snippet below and click on any of the elements with the classname product to see how this works.
$(".product").click(function(){
$(".settings").insertAfter($(this));
});
$(".product").click(function(){
$(".settings").insertAfter($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<p>Name1
<p>
</div>
<div class="product">
<p>Name2
<p>
</div>
<div class="product">
<p>Name3
<p>
</div>
<div class="product">
<p>Name4
<p>
</div>
<div class="settings">
<p>SETTINGS
<p>
</div>
You can use .insertAfter() :
$(function(){
$('.product p').click(function(){
$('.settings').insertAfter($(this).closest('.product '))
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<p>Name1<p>
</div>
<div class="product">
<p>Name2<p>
</div>
<div class="product">
<p>Name3<p>
</div>
<div class="product">
<p>Name4<p>
</div>
<div class="settings">
<p>SETTINGS<p>
</div>
You can do it like,
$(".product > p").click(function(){
var $parent = $(this).parent(".product");
$parent.siblings(".settings").insertAfter($parent);
});
by using .insertAfter()
DEMO
here is my HTML code
<div id="parent">
<div id="computer">
<div id="items">
<div id="1">hp</div>
<div id="2">compaq</div>
<div id="3">toshiba</div>
</div>
</div>
<div id="laptop">
<div id="1">i5</div>
<div id="2">dual core</div>
<div id="3">i3</div>
</div>
<div id="printer">
<div id="laser">hp laser</div>
</div>
<div id="cpu">
<div id="item">
<div id="1">pintuim</div>
<div id="2">celeron</div>
</div>
</div>
<div id="scanner">
<div id="canon">
<div>canon</div>
</div>
</div>
</div>`
I am trying to get the id of each first element of the parent div
that is to get an
array=[computer, laptop, printer, cpu, scanner]
here is my jquery code but it's taking everything.
var a = $("div.content :nth-child(1)")find("*").toArray();
please I need some help thanks
there is a selector in jQuery which will return the first level of children: DEMO
var a=[];
$("#parent > div").each(function(){ // using > will return the first level of children
a.push($(this).attr('id'));
});
alert(a);
Those are children of the #parent element so you can iterate over that and create an array out of it using .map()
var array = $('#parent').children().map(function() {
return this.id;
}).get();
snippet.log(array)
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="parent">
<div id="computer">
<div id="items">
<div id="1">hp</div>
<div id="2">compaq</div>
<div id="3">toshiba</div>
</div>
</div>
<div id="laptop">
<div id="1">i5</div>
<div id="2">dual core</div>
<div id="3">i3</div>
</div>
<div id="printer">
<div id="laser">hp laser</div>
</div>
<div id="cpu">
<div id="item">
<div id="1">pintuim</div>
<div id="2">celeron</div>
</div>
</div>
<div id="scanner">
<div id="canon">
<div>canon</div>
</div>
</div>
</div>