I have the following elements:
fieldset (class="A") > div > p > several input and labels
I want to get the last div in the fieldset - with the div tag included
i.e. not from the "p" tag that is inside the last "div"
I tried :
$('.A').children().last().html()
but it gives me the last div without the div tag (i.e. from the p inside)
any ideas why or how i can include the div tag in the query?
html:
<div class="form">
{{ form.as_p }}
<fieldset class="A">
{% for b in B%}
<div id="b-{{ forloop.counter0 }}">
{{b.as_p}}
</div>
{% endfor %}
</fieldset>
</div>
html() will only get the innerHTML. You can make use of the native outerHTML property by retrieving the native DOM element
$('.A').children().last()[0].outerHTML
Try this : You can clone the last div. Add it to some temp jquery element and take .html() will give you outer html of last div
$(function(){
var tempDiv = $('<div></div>');
tempDiv.append($('.A').children().last().clone());
alert(tempDiv.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="form">
<fieldset class="A">
<div id="a">
<p>a</p>
</div>
<div id="b">
<p>b</p>
</div>
<div id="c">
<p>c</p>
</div>
</fieldset>
</div>
I think you don't need to use other functions. You can just try
$(".A > div:last-child")
to select your last div with DIV tag included.
Related
I want to move my div class="contentlinks" tag with its content, to place it in the div class="row" after the div class="col-12".
Here is the basic html architecture :
<span id="data">
<section id="" class="thesectionQ">
<div class="container">
<div class="row">
<div class="col-12">
<h1>Title</h1>
</div>
</div>
</div>
</section>
<div class="col-12 contentlinks">
<a class="btn">link1</a><a class="btn">link2</a>
</div>
</span>
Tags are dynamically created in js... my problem is that I can't seem to use appendChild ...
my problem is that I can't seem to use appendChild ...
I'm trying to target my section with a class="thesectionQ" in a variable as well as my div class="contentlinks" that I want to move :
for example...
var thedata2 = document.getElementById('data').getElementsByClassName('thesectionQ');
var thedata = document.getElementById('data').getElementsByClassName('contentlinks');
thedata2.appendChild(thedata);
but I have errors ... and too often
give section id so it become easy.
document.querySelector('#sectionId div.row')
.appendChild(document.querySelector('div.contentlinks'))
I have page say
<div class="wrapper" id="checkLink">
<div name="something">
<div name="something">
<bean:write name="" property=""/>
</div>
</div>
<div name="something">
<div name="something">
<div name="something">
<bean:write name="" property=""/>
</div>
</div>
</div>
</div>
I want to change any text within "checkLink" div to a hyperlink if it starts with a http/https/www
The data comes from the back end and is entered by the end users... There are 90 odd fields(Out of which anyone could be a hyperlink)
Only the matching values should appear as hyperlinks
How do I convert them into hyperlinks?
https://jsfiddle.net/w033ucrm/1/
var divs = $('#checkLink div');
$.each(divs, function(index, div){
var target = $(div).attr('name');
$('body').append(''+target+'<br/>');
});
you could also use $(div).replaceWith() but with nested divs you'd only get 2 anchors
I have a div that contains div in HTML code, i just want to retrieve the string contained in that div, like the word LATTE or price:12 in the next code:
<!DOCTYPE html>
<html>
<head>
…
</head>
<body>
<div id="items">
<div id="heapbox_46958322" class="heapBox">
…
</div>
<select class="basic-example" style="display: none;">
…
</select>
<div id="dummy">
…
</div>
<div id="gallery">
<div class="item_block">
…
</div>
<div class="item_block">
…
</div>
<div class="item_block hasoptions">
price:12
<div class="add_btn">
</div>
<div class="item_name">
LATTE
</div>
</div>
</div>
<div id="order_list">
…
</div>
</div>
<script type="text/javascript">
…
</script>
</body>
Fiddle Here
UPDATE
The answers help me get all the texts in all the divs that called item_Name , but i want it from the div i clicked as i'm using an onlclick event :
$('.item_block').on('click',function(){
// here is the tip
document.getElementsByClassName("add_btn").onclick =
alert($(".item_name").text());
.
.
.
You can use jQuery's .text() function.
Example:
$(".item_name").text();
This will retrieve the text inside all divs with the class item_name.
If you just want the text of the .item_name that you clicked on:
$(".item_name").click(function() {
$(this).text();
});
Demo: http://jsfiddle.net/UFMkQ/1/
Give that div a id
suppose id="getText"
In javascript
var value = document.getElementById('getText').innerText || document.getElementById('getText').textContent;
Try this, this is help to you, In this i just add text to your order_list div for how to add text in div
$('#order_list').html('XYZ');
Fiddle Here
You could use innerHTML attribute of div to get the text inside.
alert(document.getElementById('divid').innerHTML);
innerText on the object should allow you to not only retrieve but also overwrite the text
How do I get jqery's load to load sometime after a particular tag? In my case, I'll be loading a form after the h4 tag. That's where it needs to go. My problem is: the H4 tag will disappear. Is there anyway to get the form to load under the H4 tag?
jquery:
$("#loadForm").click(function() {
$("#entry").load("load.forms.php?option=" + $("#loadForm").val());
});
markup:
<div id="post">
<div id="entry">
<h4>My Heading</h4>
//The Form goes here
</div>
</div>
Why not use InsertAfter
http://api.jquery.com/insertAfter/
Then you can select out the h3 tag and insert after it
You can add an extra element under the heading, and load the data in there?
$("#loadForm").click(function() {
$("#entry div.form").load("load.forms.php?option=" + $("#loadForm").val());
});
<div id="post">
<div id="entry">
<h4>My Heading</h4>
<div class="form"></div>
</div>
</div>
<div class="form_div">
<form name="first" class="dirs" method="post" action="">
<table>
<tr>
<td>
<img src="path..." class="info">
<div class="tip">
<p>Some text</p>
</div>
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".info").tip({ effect : 'slide'});
});
</script>
I want to select the div with the class tip and img tag class info from the div > form > table > tr > td. But i can't select it with the function i have in the script.
The selector doesn't find the img tag and the div with the class tip.
Am i going wrong somewhere?
Use this :
$(".info, .tip")
Its a multiple selector.
And look at .slideDown(), .slideUp() and .slideToggle()
Try to put your javascript code at the top of the body