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()
Related
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.
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
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);
});
I have a dropdown checkbox for which I want to get checkbox value and append a <span> when checkbox is checked after <input type="text" class="form-control">. When checkbox is unchecked I want to remove appended span.
this is what I've tried:
$ ('.chkb:checkbox').click(function(){
if ($(".chkb").prop('checked') == true){
var textName = $('.chkb:checked').next( '.txt' ).text();
$( ".input-append" ).append('<span class="input-group-addon vss"> ' + textName +'</span>');
//alert(textName);
}
else{
$( ".vss" ).remove();
}
})
It is not working so great my script because if I select more checkbox options the append is for every checked element once again and remove only when I uncheck last checkbox.
Here is a small fiddle example:
//keep dropdown open
$('.dropdown-menu').on('click', function(e) {
if($(this).hasClass('drop-down-stay')) {
e.stopPropagation();
}
});
//find checkbox span name and insert into appended span
$ ('.chkb:checkbox').click(function(){
if ($(this).prop('checked')){
var textName = $(this).next( '.txt' ).text();
$( ".input-append" ).append('<span class="input-group-addon vss"> ' + textName +'</span>');
//alert(textName);
}
else{
//build again the checked ones
$( ".vss" ).remove();
$ ('.chkb:checkbox:checked').each(function(){
$( ".input-append" ).append('<span class="input-group-addon vss"> ' + $(this).next( '.txt' ).text()+'</span>');
});
}
})
Just append in your code the next line in click:
$( ".vss" ).remove();
http://jsfiddle.net/D2RLR/5737/
//find checkbox span name and insert into appended span
$ ('.chkb:checkbox').click(function(){
$( ".vss" ).remove();
if ($(".chkb").prop('checked') == true){
var textName = $('.chkb:checked').next( '.txt' ).text();
$( ".input-append" ).append('<span class="input-group-addon vss"> ' + textName +'</span>');
//alert(textName);
}
else{
$( ".vss" ).remove();
}
})
Try
$('.chkb:checkbox').click(function () {
var items = $('.chkb:checkbox:checked').map(function () {
return '<span class="input-group-addon vss"> ' + $(this).next('.txt').text() + '</span>'
}).get();
$(".input-append .vss").remove()
$(".input-append").append(items.join(''));
})
Demo: Fiddle
replace $(".chkb") with $(this) inside click event callback function. Currently you check all of the checkboxes values in the click event callback function. $(this) refers to the clicked checkbox. So $(this).prop('checked') will refer to the last clicked checkboxes value. You can go from there to solve the problem that you have :)
My code
$( ".attachPo" ).click(function() {
alert($(this).attr('id')) // prints 59
var id = $(this).attr('id');
$( '#attachPoForm_"+id+"').show(); // id name = attachPoForm_59
});
but which does not work for me , what is the correct vay of appending jQuesy variable to a class or id name
Your quotes aren't quite right. Change to:
$( '#attachPoForm_'+id).show();
This isn't a "jQuery variable", it's just simple Javascript variable and string concatenation.
Your selector is looking for an element with an id of (literally) #attachPoForm_"+id+", I think you mean:
$( '#attachPoForm_'+id).show();
Try this
$( ".attachPo" ).click(function() {
var id = this.id
$( '#attachPoForm_'+id).show(); // id name = attachPoForm_59
// ^^^^ Fixed the quotes here
});
$( ".attachPo" ).click(function() {
$( '#attachPoForm_'+ $(this).attr('id')).show(); //set id name = attachPoForm_59
});
A mistake at
$( '#attachPoForm_"+id+"').show(); // id name = attachPoForm_59
should be
$( '#attachPoForm_'+id+'').show(); // id name = attachPoForm_59
Try to use this.id like,
$( ".attachPo" ).click(function() {
var id=this.id;
alert(id);
$("#attachPoForm_"+id).show(); // id name = attachPoForm_59
});