Develop Reference

How to replace inner html onClick on each loop

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.

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!');
});

Target elements with different ids Jquery

How do I target a particular element used with different ids.For instance that have the ids row and col. I have tried doing this with jquery.
var $drag = $( "#col" );
var $drag2 = $( "#row" );
$("td", $drag, $drag2).droppable({ accept: ".special" });
But the second id "row" stored in drag2 is not selected. What is the proper way of doing this in jquery.

You can use multiple selector
$( "#col, #row" ).find("td")
or
var $drag = $( "#col" );
var $drag2 = $( "#row" );
$drag.add($drag2).find("td").droppable({ accept: ".special" });

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()