I'm trying to get the value of last <h4> element of a div. I have tried with all the solution I found on web but nothing is working here.
<div id="mdiv">
<div id="example">
<h4> </h4>
</div>
<div>
and JQuery
var texter = '<h4>' + message + '</h4>' + '<br/>';
$('#example').append(texter);
//not working
alert($('#example').children().last().text());
//Not working
//$('#example h4:last').val();
//not working
//$('#example h4:last-child').val();
as you see above I tried 3 approch including commented code but nothing is working for me. What should I do to get the newly added <h4>?
The :last selector is sufficient:
$('#example h4:last').text()
Here's a working example:
let texter = '<h4>' + "test" + '</h4>' + '<br/>';
$('#example').append(texter);
alert($('#example h4:last').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mdiv">
<div id="example">
<h4> </h4>
</div>
<div>
You should do like so :
alert($('#example h4').last().text());
There you will catch the last h4. With your code you'r trying to get the last div#example.
Related
I created a css class for 8 divs, I need to use the each function of jquery to count the divs and show the result in the page's html, example: "8 divs appear".
I created a code but it doesn't work, it doesn't show the result.
code:
<script>
$( ".class" ).each(function( index ) {
console.log( index + ": " + $( this ).text() );
});
</script>
if you just want to count them, you can do:
$('.class').length
From each() method to get whole same class divs index + content or You want to count how many divs has same class then simply use .length.
Note: Check on Full page. then you can see same class divs count result.
// Console inded with each div text.
$('.sameclass').each(function(index){
console.log(index +':'+ $(this).text());
});
//Count How many divs has (sameclass) class.
$('.result').text($('.sameclass').length);
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="sameclass">Text #1</div>
<div class="sameclass">Text #2</div>
<div class="sameclass">Text #3</div>
<div class="sameclass">Text #4</div>
<div class="sameclass">Text #5</div>
<div class="sameclass">Text #6</div>
<div class="sameclass">Text #7</div>
<div class="sameclass">Text #8</div>
<hr>
<p>Total divs has (sameclass): <strong class="result"></strong></p>
After a few attempts, I managed to solve the problem.
I created three codes and they worked and gave me the result I wanted. Thanks a lot for the help.
1.
var totalPageProducts;
jQuery('.products-grid .item').each(function(index, value) {
totalPageProducts = index + 1;
jQuery('.show-no').html('Showing '+ totalPageProducts +' products');
});
2.
jQuery(document).ready(function($) {
jQuery('.show-no').html('Showing '+ jQuery('.products-grid .item').length +' products');
});
3.
jQuery('.show-no').html('Showing '+ jQuery('.products-grid .item').length +' products');
I have button to show phone number if clicked with this code:
var shortNumber = $("#phone_ch").text().substring(0, $("#phone_ch").text().length - 12);
var onClickInfo = "_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);";
$("#phone_ch").hide().after('<div id="clickToShowPc" onClick="' + onClickInfo + '">' + shortNumber + 'X XXXXXXXX</div>');
$('section:has(div.price_c,div.contact_name_info,div#clickToShowPc)').addClass('xoom_c');
$("#clickToShowPc , #phone_cc").click(function() {
$("#phone_ch").show();
$("#phone_cc").hide();
$("#clickToShowPc").hide();
});
And I try to clone it with this code:
$( ".phone_c" ).clone(true , true).attr('class', 'phone_c col-lg-6').appendTo( ".main-section" );
And this is the original button HTML:
<div class="phone_c col-lg-12 col-md-12 col-sm-6 col-xs-12">
<span id="phone_ch" style="display: none;"> 012 73962304</span><div id="clickToShowPc" onclick="_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);"> 01X XXXXXXXX</div>
<div id="phone_cc">Show phone</div>
</div>
The button cloned but with showing the hidden elements and If I click it it will show the hidden element on the original one.
Can some one advise me with the correct code please?
I tried to search here and I found that I need to enable the
.clone(true , true)
in my code. And also I found something about duplicating ID's but it was not clear to me and I failed to solve my problem.
Thank you
When you clone your div ".phone_c", you will have multiple elements with the same ID. So, when you use the DOM Selector "#phone_cc", it will select the first one because it's how it works. If you had :
<span class="phone_ch" style=...
So you could use the DOM Selector ".phone_cc" and all elements with that class will be selected.
Now, you want to show and hide only elements "near" the cloned clicked element. To do that, you will have to use classes instead of IDs.
<div class="phone_c col-lg-12 col-md-12 col-sm-6 col-xs-12">
<span class="phone_ch" style="display: none;"> 012 73962304</span>
<div class="clickToShowPc" onclick="_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);"> 01X XXXXXXXX</div>
<div class="phone_cc">Show phone</div>
</div>
Then try to reach the parent element to reach the children :
var shortNumber = $(".phone_ch").text().substring(0, $(".phone_ch").text().length - 12);
var onClickInfo = "_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);";
$(".phone_ch").hide().after('<div class="clickToShowPc" onClick="' + onClickInfo + '">' + shortNumber + 'X XXXXXXXX</div>');
$('section:has(div.price_c,div.contact_name_info,div.clickToShowPc)').addClass('xoom_c');
$(".clickToShowPc , .phone_cc").click(function() {
var parent = $(this).parent();
$(".phone_ch", parent).show();
$(".phone_cc", parent).hide();
$(".clickToShowPc", parent).hide();
});
I hope this helps.
I'm currently having some issues with Phonegap and my HTML and Javascript codes.
HEAD SCRIPT CODES:
<script>
var requestsHTML = "<li id="+displayReqId+" class='table-view-cell'>" +
"<a class='navigate-right' href="+goToUrl+" data-transition='slide-in'>" +
"<strong class='requestTitle'> "+displayEduLevel+"</strong>" +
"<div class='displaySubject status'>"+displaySubject.join(", ")+"</div>" +
"</a>" +
"</li>";
$("#viewRequestList").html(requestsHTML);
</script>
HTML BODY CODES:
<div class="content">
<div class="ribbonTitle_request">
<img src="imgs/ribbon.png" height="80%" width="80%">
<div class="containerRibbon">
<div class="subTitle" align="center"> Pending Requests </div>
</div>
</div>
<div id="viewRequest" class="viewRequest card">
<ul id="viewRequestList" class="table-view">
</ul>
</div>
</div>
As you can see, when the document runs, I want the li tag to be inserted into the body. However, nothing appears when I run it on the iOS Simulator.
How it currently looks like: http://imgur.com/9fwqlci
But when I do add the li directly into the body, it works: http://imgur.com/Mb25T7u
Would appreciate it if someone could help me with this problem. Thank you.
EDIT: Fixed codes & edited Title.
In your <head> the #viewRequestList ul isn't created yet, so $("#viewRequestList") won't find it. Add your script at the end of your <body> or into the $(document).ready() function.
I am having an issue changing the ID of HTML attributes using JQuery.
This is what I have been using:
$(document).ready(function () {
$('.hiddenDiv').each(function (i) {
$(this).attr("id", "title" + (i + 1));
});
This the HTML:
<div id="Foo">
<div class="title"></div>
<hr></hr>
<div class="hiddenDiv" style="display:none;"></div>
<hr></hr>
<div class="title"></div>
<hr></hr>
<div class="hiddenDiv" style="display:none;"></div>
</div>
I am producing the HTML using another JQuery script that creates it, iterating through an object creating a title and hiddenDiv divs for each element that exists in the object.
jQuery Script that produces the HTML:
$('#Foo').append('<div class="hiddenDiv" style="display:none;">' + foo[0].Content + '<br>' + 'Address: ' + foo[0].Address + '</div><br><hr>');
Both scripts execute when the document is ready.
Looks like elements are not created on DOM ready. You need to add the ids to them just after appending the content. like this:
$('#Foo').append('<div class="hiddenDiv" style="display:none;">' + foo[0].Content + '<br>' + 'Address: ' + foo[0].Address + '</div><br><hr>');
$('.hiddenDiv').each(function (i) {
$(this).attr("id", "title" + (i + 1));
});
Demo
<div id="default">
<h2> heading </h2>
<div id="big-on-hover">
<h2> heading </h2>
I want to render the text of h2 of <div id="default"> in <div id="big-on-hover"> because both will be same always so I will change at one place it will show all other places also.
You could try something like this:
$(document).ready(function() {
$('#default h2').mouseover(function() {
var text = $('#default h2').html();
$('#big-on-hover h2').html(text);
});
});
If i understood it correctly this is what you want.
jQuery(document).ready(function(){
jQuery('#default').hover(function(){
var hoverhtml = "<h2>" + jQuery('#default h2').html() + "</h2>" + jQuery('#big-on-hover').html();
jQuery('#big-on-hover').html(hoverhtml);
},
function(){
jQuery('#big-on-hover h2').remove();;
});
});