I wrote this code in jQuery, it's working perfectly, but I need the index value to begin at 1.
How can I do this? This is my code:
$( "span.text" ).each(function( index ) {
console.log( index + ": " + $( this ).attr('name') );
var micaracter= $(this).attr('name');
$( "span.lista a#caracter_" + index).append(micaracter);
});
Then just do the native programming method, add one with the zero based index,
$( "span.lista a#caracter_" + (index + 1)).append(micaracter);
Related
var john= 5
$(document).ready(function(){
$('#he').append("<h1>" + $(john + 4).return + "</h1>")
})
I'm trying to get it to come out to nine, but it comes out undefined. How to fix? Yes, I do realize I could just append a "9", but I'm trying to learn how to do very basic math with Jquery, could you show me how to do it through the function?
var john = 5;
$('#he').append('<h1>' + (john + 4) + '</h1>');
Well, you could use something like
var john= 5
$(document).ready(function(){
$('#he').append("<h1>" + (john + 4) + "</h1>")
})
Just change the code to this,
var john= 5
$(document).ready(function(){
$('#he').append("<h1>" + (john + 4) + "</h1>")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="he"></div>
Here you go with one more solution using ES6
var john = 5;
$(document).ready(function(){
$('#he').append(`<h1>${john + 4}</h1>`);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="he"></div>
Hope this will help you.
As the other answers demonstrate, it is for the most part unnecessary to use a return property to display the result of a simple math operation which will evaluate and yield an expression that can be displayed. Nonetheless, assuming a div element with an id of "he", there are a couple of approaches where one could utilize a return property. One could specifically use that property of the event object whose value is:
The last value returned by an event handler that was triggered by this
event, unless the value was undefined.
One could incorporate this property, as follows:
var john = 5;
$(document).ready(function(){
$( "button" ).click(function( event ) {
return john + 4;
});
$( "button" ).click(function( event ) {
$( "#he" ).append( "<h1>" + event.result + "</h1>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>john + 4 equals?</p>
<button>Display Result</button>
<div id="he"></div>
Another interesting thing you can do involves assigning such a property to an element and then use it for the text value for a pair of open and close h1 tags, as follows:
var john = 5;
$(document).ready(function(){
$("#he").prop("return", john + 4);
$("#he").append("<h1>" + $("#he").prop("return") + "</h1>");
});
see live code
I have a simple menu
<div class="nav-container desktop">
One
Twp
</div>
I am looping through this with jQuery each and then creating <li> tags with the complete <a.../a>.
$.each( $('.nav-container>a'), function(i, item){
var menupunkt = '<li>' + item + '</li>'
console.log(i, menupunkt);
});
Examples: http://codepen.io/anon/pen/bwbgap, https://jsfiddle.net/86g44ssp/
In my console I see only the following
<li>http://xyz.ccom/_index.php?page=_sub_papa&main=tw</li>"
Why don't I get the whole a? Because when I just print "item" I get the whole <a.../a>
item or this represent a DOM element. You're casting it to string when you treat it as as string. You can use item.outerHTML - the string you're looking for - in place of item.
$.each( $('.nav-container>a'), function(i, item){
var menupunkt = '<li>' + item.outerHTML + '</li>'
console.log(i, menupunkt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-container desktop">
One
Twp
</div>
NOTE
Not sure if there's an advantage to it but I would prefer:
$('.nav-container>a').each(function(i, item){
var menupunkt = '<li>' + item.outerHTML + '</li>'
console.log(i, menupunkt);
});
I have updated your fiddle, you just need to change
var menupunkt = '<li>' + item + '</li>'
to
var menupunkt = '<li>' + item.outerHTML + '</li>'
And there is no need to add extra wrapping or stuff, just get the HTML from outerHTML and you're done !
$.each( $('.nav-container>a'), function(i, item){
var menupunkt = '<li>' + $(item).text() + '</li>'
console.log(i, menupunkt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-container desktop">
One
Twp
</div>
I believe you want to access the outerHTML. I've included code from another SO answer:
jQuery, get html of a whole element
https://jsfiddle.net/86g44ssp/1/
The change I've made is here:
jQuery.fn.outerHTML = function() {
return jQuery('<div />').append(this.eq(0).clone()).html();
};
... other code here ...
var menupunkt = '<li>' + $(item).outerHTML() + '</li>'
This is caused by type conversion. When you do '<li>' + item + '</li>' the JavaScript runtime will try to convert item to a string. This is done "under the hood" by calling toString() method on the item, e.g. item.toString(). You can do forced type conversion by doing it explicit:
console.log(i, item.toString());
$( ".nav-container a" ).wrap( "<li></li>" );
This is the fastest way to wrap .nav-container a inside list element.
While looping $.each('.nav-container a', function(i,v) {}); each <a> are like object NOT at TEXT
if you want target specific elements use:
$.each('.nav-container a', function(i,v) {
var fullObject = $(this).html(),
link = $(this).attr('href'),
text = $(this).text();
});
In html code I am using code
<input type = "text" id = "abc#def.com"> to get text
now it need to get its value which is entered in text field. I am using jquery to do that:
$( document ).ready( function() {
$( ".bid" ).click( function() {
idVal = this.id
bidID = "#" + idVal + "bid"
spanID = "#" + idVal + "cbid"
bidValue = $(bidID).val();
alert(idVal)
alert(bidID)
alert(bidValue) //this alert says undefined
$( spanID ).html( ' ' ).load( '{% url online_machines %}?id=' + idVal + '&bidvalue=' + bidValue);
});
});
By doing this i get the value error undefined.
I tried to remove special characters from the id to get its value. But I need the id with special characters. How can
I get its value using jquery ?
Instead of trying for ID using #, try this to match attribute like this,
$('[id=ID]')
or
$('[id='+ID+']')
so instead of
bidID = "#" + idVal + "bid"
you can try
bidID = "[id=" + idVal + "bid]"
Try escaping it:
$('#abc\\#def.com').val();
First paragraph of http://api.jquery.com/category/selectors/
It looks like JQuery has a useful method for this as of version 3 called escapeSelector.
$('#' + $.escapeSelector(my_id_with_special_chars));
https://api.jquery.com/jQuery.escapeSelector/
$(document.getElementById('abc#def.com')) also works.
Use the function CSS.escape() to select that DOM element.
In your case for the id abc#def.com you can use the below code.
$("#" + CSS.escape('abc#def.com'));
Have a shot at this, not 100% on whether this is what you're after. Let me know:
$( document ).ready(function() {
$(".bid").click(function() {
idVal = $(this).attr('id');
bidID = "#" + idVal + "bid";
spanID = "#" + idVal + "cbid";
bidValue = bidID.val();
alert(idVal);
alert(bidID);
alert(bidValue);
spanID.html(' ').load('{% url online_machines %}?id=' + idVal + '&bidvalue=' + bidValue);
});
});
This solution below worked for me, it is pretty clean:
//your HTML id has special characters:
var option= "Some option with (parenthesis or # )";
//use this type of jquery query:
$(`[id="order_${option}"]`).prop('checked',true)
Hi i m having one page with one textbox named search and one search button. When i'm searching anything for the first time it's showing me the right data but when i'm searching some other things for the next time then the elements which was listed before are also appended below of that new list. Suppose i'm searching state name by k it will give me right list of karnataka, kerala. But if i start to search again by g, it will show me in output as goa,gujrat,karnataka kerala. i tried using refresh option but it still not working. This is my js code
$.each(response.state, function (i, state) {
$('#statelist').append(
'<li>' +
'<a href="#">'
+
+'<b>'+ '<font color="green">'+'<h3>'+ state.Name +'</h3>'+'</font>' +'</b>'+
'</a>' +
'</li>'
);
});
$('li img').width(100);
$('.ui-li-icon li').click(function() {
var index = $(this).index();
text = $(this).text();
// alert('Index is: ' + index + ' and text is ' + text);
});
$("#statelist").listview("refresh");
and this is html
You are using .append() function. It appends whatever you append to the end of the list.
Check this link:
http://api.jquery.com/append/
Try using innerHTML property of the DOM model.
You could add
If(!('#statelist').html() == ""){
$(this).remove();
//execute rest of code that appends state list
}
Then do an else statement and execute your append code without removing()
UPDATE: a better option is to do this-
$.each(response.state, function (i, state) {
$('#statelist').html(
'<li>' +
'<a href="#">'
+
+'<b>'+ '<font color="green">'+'<h3>'+ state.Name +'</h3>'+'</font>' +'</b>'+
'</a>' +
'</li>'
);
});
$('li img').width(100);
$('.ui-li-icon li').click(function() {
var index = $(this).index();
text = $(this).text();
// alert('Index is: ' + index + ' and text is ' + text);
});
Can I use data attribute for the source of my autocomplete?
for example
HTML
<input type="text" class="autocomplete" data-source="/search.php" />
Javascript
$(".autocomplete").autocomplete({
source : $(this).data('source'),
minLength:1,
select: function( event, ui ) {
console.log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
I tried it but it always gives me an error.
What's wrong with my code?
Uncaught TypeError: Property 'source' of object #<Object> is not a function
In source you can use this.element which refers to the input
$(".autocomplete").autocomplete({
source : this.element.attr('data-source'),
minLength:1,
select: function( event, ui ) {
console.log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
here's the fix
$('.autocomplete').keypress(function(){
$(this).autocomplete({
source: $(this).data('source'),
minLength: 1,
select: function(event, ui) {
console.log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value);
}
});
});
I added a keypress function so that it will get the current element.
The this pointer does not refer to the .autocomplete element -- this only equals the selected element inside callbacks executed by jquery. It looks like you want to do something like this:
$(".autocomplete")
.autocomplete({
minLength:1,
select: function( event, ui ) {
console.log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
})
.each(function() { // Goes through `.autocomplete` elements and sets source
$(this).autocomplete("option", "source", $(this).data('source'));
})
;
every keystroke of autocomplete will trigger a remote request if the source is a url. what you can do to prevent that is to "pre-fetch" the data (make sure to return a JSON-valid array), then add the return data as the source for the autocomplete. that way, data is only fetched once, and autocomplete will reference to that data.
jQuery autocomplete already has a filtering capability. you just need a full list of items and it will filter it for you.
//get all input boxes with class "autocomplete"
$('.autocomplete').each(function(){
//reference input and get it's url
var input = $(this);
var url = input.data('source');
//get list array only ONCE for each input using their specified urls
$.get(url, function(data) {
//when request is received, add autocomplete using the returned data
input.autocomplete({
source: data,
minLength: 1,
select: function(event, ui) {
console.log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value);
}
});
});
});