I need to change the text in a button but it's not working. This is what I've come up with thus far:
var newElemen = $(<button text='Text changed..'></button>);
document.append$(newElemen);
I've also prepared a jsFiddle example.
Don't spend too many horses on this.
You need to first look at how jQuery's selector works. It works similar to CSS selectors (if you're not familiar with that I suggest you start with something more basic).
If you need a quick review on jQuery syntax. In your example you need to use the element selector $('button') and then you'll want to apply the .text() function to change the text for the button. So if you put it together. You'll want to select the button and then apply the text() function, passing in the string you want to change the text to, to change it's text.
$('button').text('Insert Text Here');
Use .text method using button selector
$("button").text('Text changed..');
$('button').text('new text');
fiddle: http://jsfiddle.net/zLf3k/3/
jQuery selector must be String
created new DOM element when you use html element on jQuery selector
use $(document).append instead of document.append$
$('button').text('some text');
Related
I am new in jQuery and still learning. My problem is I don't know how to convert the following javascript code to jQuery.
Javacript:
document.getElementsByClassName('p-bg')[0].style.backgroundColor = '#'+this.color
Thanks in advance guys.
By the way this is the full code:
<input class="color" onchange="document.getElementsByClassName('p-bg')[0].style.backgroundColor = '#'+this.color">
Thanks again
$(".color") jQuery class selector
.change .change() form events
.eq() .eq() filter elements
.css() .css() manipulation
$(".color").change(function(){
$(".p-bg").eq(0).css("background-color", $(this).css("color"));
})
Note document.getElementsByClassName('p-bg')[0] in jQuery is equivalent to $(".p-bg").eq(0)
Remember that in jQuery, the DOM must be loaded to start working, eg:
$(document).ready(function(){
//You jQuery code here...
})
$('.p-bg:first').css('backgroundColor','"#"+this.color');
The change function binds a function that will execute onchange of the selection set which is in our case all elements with class = 'color'.
$(this) within the function will refer to the current DOM element onchange in the selection, so in this way we catch it's color property.
$('.p-bg:first'), here we are selecting all elements with class p-bg, and to obtain the first element we are using the :first Pseudo Class Selector, then using the css jquery function, we are defining the css property in the first paramerter 'backgroundColor' and the value of the property in the second parameter using another css property (the color) of the current element $(this).css("color").
When we use css function with one parameter it will return the value, with 2 parameter we will be setting the value.
The code below will be the change in jquery.
$(".color").change(function(){
$('.p-bg:first').css('backgroundColor', $(this).css("color"));
});
If you really want to look alike that as you have used Js in your html, this will work for you (Only one line code):
<input class="color" onchange="$(this).css('background-color',$(this).css('color'))">
But i will recommend you to create a change function and then work on it.
Html:
<input class="color">
Script:
<script>
$('.color').on('change',function(){
$(this).css('background-color',$(this).css('color'));
});
</script>
Explanation:
$(this) will get this element for you. then using .css('background-color',$(this).css('color')) will assign its color to its background.
How to select element with class MyClass and value MyValue, but without using each?
I tried something like:
$(".MyClass").find("[value='MyValue']")
$(".MyClass[value='MyValue']")
This is example: http://jsfiddle.net/HQaG5/
It works if i use hard coded value for select element.
You want :contains() :
$( ".MyClass:contains('MyValue')" )
Take a look here: jquery find element by text
You can use the :contains selector to find elements containing text.
But if you want to match an exact string then .filter is the better option
If the element is an input and you want to search after property value you can use .filter()
$('.MyClass').filter(function(){
return this.value=="MyValue";
});
DEMO
If you are looking to get the select box element that has the specified value selected (which seems to be the case based on your fiddle), then you can use this…
$(".MyClass option:selected[value='MyValue']").parent()
DEMO
However, I would question why you want to do this, as it seems kind of backwards.
I've got this element that's not precisely defined as a div or anything but just white space popping up inside the html. Can't get to it with jQuery to remove it.
Type of element is highlighted in the screenshot.
Im not expert, but maybe you could use .prev() method.
Something like
$('#main .content').prev();
Pure Javascript to select it:
var textNode = document.getElementById("main").getElementsByClassName("filter-navigation")[0].nextSibling;
and remove it:
textNode.parentElement.removeChild(textNode);
jQuery simplifies the selection a bit, but the removal has to be done the same way since jQuery doesn't like removing text nodes:
var textNode = $("#main").find("filter-navigation")[0].nextSibling;
textNode.parentElement.removeChild(textNode);
The answer is not simply.
jQuery can map objects with structure. It's very hard to catch just whitespaces as DOM elements and remove them.
I cant suggest 2 alternatives:
Use jQuery to get parent tag, extract innerHTML and user regex to remove "extra whitespaces" between tags:
$(document).ready(function(){
var container = $('.product-container');
container.html(container.html().replace(/>\s+</i, '><'))
});
Use css to clean how looks my content inside that tag as suggests thirtydog here
Hope this help!
I want to put element under focus just after append it, means something similar to :
$("id").append($("elementid")).focus(); // not working
In your example you are adding focus to id element, that's why it doesn't work.
Try this solution instead:
$("#elementid").appendTo("#id").focus();
DEMO: http://jsfiddle.net/wRSBY/
The jQuery ID selector needs a # before the id.
So
$("#id").append($("#elementid")).focus();
should work if you want to put focus on your #id DOM element, if you want to put focus on the #elementid DOM element, then you can use VisioN's answer.
Try trigger
$("#id").trigger('focus');
I'm trying to change the border color of an image using its id with jquery
( photo['id'] is passed in from a previous function )
the ids of the photos are of the form 'photo239839'
$('#photo'+photo['id']+'').click(function(){
$('#photo'+photo['id']+'').css('border-color','#777');
});
When I try to use this same code using its class it works,
but I can't use this method since there are multiple images on the same
page with the same class
$('img.flickr_photo').click(function() {
$("this.flickr_photo").css('border-color','#777');
});
This is what you need to do:
$('img.flickr_photo').click(function(){
$(this).css('border-color','#777');
});
I would always always add a css class rather than an inline style.
Much more maintainable and extensible.
Example:
$('img.flickr_photo').click(function(){
$(this).addClass('greyishBorder');
});
Either photo['id'] is wrong, or is changing after you set up the click handler.
To test for the first case, you can alert (or console.log with FireBug, or whatever) the length of the jQuery selection:
alert($('#photo'+photo['id']).length);
The solution in the second case is to use 'this'. In the click handler, 'this' is set to the element that caused the click event.
$('#photo'+photo['id']).click(function(){
$(this).css('border-color','#777');
});
Edit: #Dreas Grech is right, as long as you want to apply the behavior to all the elements with the flickr_photo class. If you can generalize the selector to select all the elements with a single query, it's better to do that.