How to replace inner html onClick on each loop - javascript

I'm trying to loop each thru of the attribute and if it matches, it will replace the inner HTML of the DOM. For this example, I'm trying to replace the data-product="momentum-shorts-2-0" inner HTML DOM which is the <h2>Momentum Shorts 2.0 NEW</h2> contents into the <div> class="compare-main" </div> that I've highlighted in the screenshot..
This is what I have with my code now but i'm stuck.. it keeps returning to me singular value of the last item..
<script>
jQuery( document ).ready(function() {
$( ".compare-filter-item" ).click(function() {
var selected_data_product = $(this).attr("data-product");
$(".compare-all .compare-products [data-product='" + selected_data_product + "']").each(function(){
new_html = $(this).html();
$(".compare-main .compare-products [data-product='" + selected_data_product + "']").each(function(){
$(this).html(new_html);
})
});
});
})
</script>
Issue:

<script>
jQuery( document ).ready(function() {
$( ".compare-filter-item" ).click(function() {
var selected_data_product = "momentum-shorts-2-0";
$(".compare-main .compare-products [data-product='" + selected_data_product + "']").each(function(){
$(this).find("h2").text("Momentum Shorts 2.0");
});
});
})
</script>
I tried to understand your requirement and here is the solution see if it help.

Related

Retrieving jQuery data from dynamic HTML element returns undefined

I am trying to retrieve data from a variable HTML element. On click, the id of the <span> element is retrieved, which I want to enable me to dynamically $([dynamic id]) select that element and request the data stored in the data attribute.
My jQuery looks like this:
$( document ).ready( function() {
$( ".checkmark" ).on( "click", ( event ) => {
let checkBoxId = "#" + event.target.id, // #checkBox1
checkBoxData = event.target.id + "-value", // checkBox1-value
checkBoxValue = $( checkBoxId ).data( checkBoxData ); // undefined
} );
} );
The HTML element targeted looks like this:
<span class="checkmark" id="checkBox1" data-checkBox1-value=-155></span>
The value of let checkBoxValue is undefined and I cannot figure out why.
Help would be greatly appreciated.
You can get attribute value of span using attr() function in jQuery
checkBoxValue = $(checkBoxId).attr(checkBoxData);
The checkBoxId variable is unnecessary because you can use the this keyword since it is the current element you are working with.
$(function() {
$(".checkmark").on("click", (event) => {
let checkBoxData = event.target.id + "-value";
let checkBoxValue = $(this).data(checkBoxData);
});
});
It seems you are having scope issues with the new ()=>{} syntax.
So, you will need to bind this to the function event handler using {self:this}. If you don't want to do this, you can use the old function(){} syntax instead.
$( document ).ready( function() {
$( ".checkmark" ).on( "click", {self:this}, ( event ) => {
var checkBoxValue = $(this).data("checkbox1-value")
alert(checkBoxValue);
} );
} );
And also as #Erwin mentioned, use only lowercase in your data- attribute name:
<span class="checkmark" id="checkbox1" data-checkbox1-value="-155"></span>
JsFiddle
It's returning undefined because it is declared incorrectly. The part after data- should be in lower case. In your case, it must be
<span class="checkmark" id="checkbox1" data-checkbox1-value=-155></span>
for the .data() to work.
this code works for me try it ;)
$( document ).ready( function() {
$( ".checkmark" ).on( "click", function() {
var checkBoxId = "#" + $(this).attr('id');
var checkBoxData = $(this).attr('id') + "-value";
$( this ).attr('data-'+ checkBoxData, 155 );
} );
});
jsfiddle link

How to add var inside new link herf using jquery?

i try to add var inside herf of a new link like this:
$(document).ready(function(){
var getuser = $( ".username span" ).text().replace("#", "");
var getnickname = $( ".nickname span" ).text();
$( ".go-premium" ).html('Go premium!');
});
HTML code :
<div class='nickname'><span>Ali</span></div>
<div class='username'><span>#AliUser</span></div>
<div class='go-premium'></div>
I cant figure out what is wrong.
Thanks.
Just put your vars outside of string double quotation:
$(document).ready(function(){
var getuser = $( ".username span" ).text().replace("#", "");
var getnickname = $( ".nickname span" ).text();
$( ".go-premium" ).html('Go premium!');
});

Copy all identified class to another class

If I click on the map, I copy all classes from class li class="salony" id="wojewodztwo-malopolskie" into class <div id="spisSalonow">. It's works correctly.
How can I do that, when I choice krakow from select(selector),Should I copy all classes with name krakow <div class="krakow"> into class <div id="spisSalonow">?
$( document ).ready(function() {
$("svg").delegate("*", "click", function(e) {
$('.st0').removeAttr('style');
var id = $(this).attr('id');
$(this).css("fill", "#ff6600");
//$('#spisSalonow').stop().slideDown("slow").css('opacity', '0').html($('#wojewodztwo-' + id).html()).animate({opacity: 1}, 1000).slideDown(500);
$('#spisSalonow').stop().slideDown("slow").css('opacity', '0').html($('#wojewodztwo-malopolskie').html()).animate({opacity: 1}, 1000).slideDown(500);
});
$("select" ).change(function() {
var allListElements = $(".krakow");
$( "#spisSalonow > div" ).find( allListElements );
var liczbaSalonow = jQuery('.' +$(this).val()).length;
//alert(jQuery('.' +$(this).val()).length);
$('#spisSalonow').stop().slideDown("slow").css('opacity', '0').html($('.' + $(this).val()).html()).animate({opacity: 1}, 1000).slideDown(500);
alert( $(this).val() );
});
});
JSFiddle
https://jsfiddle.net/4q8ud1pw/7/
Is this what you wanted?
Thanks to (jQuery get html of container including the container itself) for showing me how to include the container.
$("select" ).change(function() {
var html = '';
$(".krakow").each(function(){
html += $(this).wrap('<p/>').parent().html();
});
$('#spisSalonow').stop().slideDown("slow").css('opacity', '0').html(html).animate({opacity: 1}, 1000).slideDown(500);
});

Dynamically loaded jQuery not finding class

I have the following code which loads jQuery into the page dynamically after page load and then attempts to run some jQuery of its own afterwards. The first console log of the page title works. The issue comes when it cant find the class "special-div" later on in the page and replace it with the appropriate text. Any thoughts?
//Load jQuery library using plain JavaScript
(function(){
var newscript = document.createElement('script');
newscript.type = 'text/javascript';
newscript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(newscript);
// Poll for jQuery to come into existance
var checkReady = function(callback) {
if (window.jQuery) {
callback(jQuery);
}
else {
window.setTimeout(function() { checkReady(callback); }, 100);
}
};
// Start polling...
checkReady(function($) {
console.log( 'jQuery is loaded on: ' + $('title').text() );
$( '.special-div' ).each(function( index ) {
console.log( index + ": " + $( this ).text() );
$( this ).replaceWith( "Say something here " + $( this ).attr( "id" ) + ' ' + $( this ).attr( "title" ) );
});
});
})();
The HTML looks like this:
<div id="something" class="special-div" title="else"> </div>
The wacky CMS that I am working on only allows for me to paste in one external javascript file so i have to load in jQuery and all other scripts i need through that one file.
Edit:
so i ran a few additional tests and tried this:
console.log( 'jQuery is loaded on: ' + $( '.special-div' ).attr( "id" ) );
the response i am getting is:
jQuery is loaded on: undefined
If you want to return content of div in second console.log, use $( this ).html() instead of $( this ).text()
If you want to replace text for each $( '.special-div' ) with the content of their attributes, you have to do:
$( this ).replaceWith( "Say something here " + $( this ).attr( "id" ) + ' ' + $( this ).attr( "title" ) );
instead of
$( '.special-div' ).replaceWith( "Say something here " + $( this ).attr( "id" ) + ' ' + $( this ).attr( "title" ) );
otherwise you get the same replacement for all occurrences.
I tried it and it works.
But if you are putting it in <head> and another jQuery is loaded before it, DOM searching will run before the DOM getting ready so that it can not find the DOM.
(case of no window.setTimeout(function() { checkReady(callback); }, 100);)
(another CMS plugin might load jQuery)
So it could be better to run the script on kind of window.onload timings.
Or putting it on the end of <body> may also work.

How to add element in element using jquery

I have some code like this:
<p>Nuno</p>
<p>Eimes</p>
How can I manipulate it like this:
<p>Nuno</p>
<p>Eimes</p>
I've tried:
var name=$(this).text();
$( "p" ).each(function() {
$(this).prepend('<a href="id/'+ $(this).text() +'"> ');
$(this).append("</a>");
});
but it results:
<p> Nuno</p>
<p> Eimes</p>
the <a> is not inside $('p').text(); also if i change to name. it didn't show the value.
$( "p" ).each(function() {
var text = $(this).text();
$(this).wrapInner('');
});
Live Demo
Simple and .wrapInner()
$('p').wrapInner(function(){
return '<a href="name/' + $(this).text() + '" />' // even this.innerHTML instead of $(this).text() will do
})
Demo: Fiddle
Once you've extracted the name, I would just rewrite the whole code within the <p></p> tags again:
var name=$(this).text();
$( "p" ).each(function() {
$(this).html('' + $(this).text() + '');
});
You just need to grab the inner stuff, then replace everything in the tag with the new HTML:
var name=$(this).text();
$( "p" ).each(function() {
old = $(this).html();
$(this).html(''+old+'');
});
Fiddle
Demo
$('p').html(function () {
return '' + this.innerHTML + '';
});
.html()

Categories

Resources