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.

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

Jquery: blur not triggering event after clicking out of focus

Trying to have an Ajax event trigger after clicking out of an inline edit. Can't get the blur to trigger when clicking out of focus.
HTML:
<span class="tb">sdaf</span>
JQUERY:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$('document').ready(function(){
$( "span.tb" ).on( "click", function() {
var $this = $(this); // this is clicked span.
var html = $this.html();
$this.replaceWith('<textarea name="newDesc" style="width:100%;">'+html + '\r\n </textarea>').html().focus();
$this.blur(function() {
alert("out of focus");
// trigger Ajax event here to save new data
$this.replaceWith('<span class="tb">'+html + '\r\n </span>').html();
})
})
});
</script>
JS Fiddle:
https://jsfiddle.net/4mvj8dg6/2/

Do have any issues with using contenteditable ?
You can skip the whole jQuery business with
<span class="tb" contenteditable>sdaf</span>
Here's an example
EDIT
If you have to use jQuery, your code could look like this
$('document').ready(function(){
function inputGen(el, content){
var textarea = document.createElement("textarea");
textarea.className = 'tmpTxt';
textarea.name = 'newDesc';
textarea.style.width = '100%';
textarea.value = content;
el.html(textarea);
$('.tmpTxt').focus();
$('.tmpTxt').on('blur', function(){
el.removeClass('active');
el.html( $(this).val() );
})
}
$( "span.tb" ).on( "click", function() {
var $this = $(this);
if( !$this.hasClass('active') ) {
inputGen( $this, $this.html() );
$this.addClass('active');
}
})
});

How do I make elements in jQuery Selectable deselected?

How do I make elements in jQuery Selectable deselected? At this Link it is well documented how to use jQuery Selectable but it is never mentioned how to deselect selected elements again. Any ideas?
<script>
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
</script>
<ol id="selectable">
<?php
for($i=1;$i<=9;$i++) {
echo "<li id=\"field_$i\" class=\"ui-state-default\">$i</li>";
}
?>
</ol>

Hold ctrl and click on the elements. It can also be used to make multiple selections.

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