I'm new in Jquery, and I have this code:
jQuery(document).ready(function(){
var title = jQuery(".fullVisaImg").attr("inselect");
var links = jQuery(".ff_elem>option");
for(var i=0; i<links.length; i++) {
if (title == links[i].value) {
links[i].attr("selected", "selected"); // here is my problem
alert(links[i].value);
return;
}
}
});
i have a select element on my pages, and want to make one of elements selected. if I comment line with // here... all works good, and i see all my option values.
Thanks for help!
When you use [] to access an element in a jquery set, you get back the raw DOM element. So you can not use jquery methods on it directly..
You should also use .prop instead of .attr() when interacting with properties of the element
So use
links.eq(i).prop("selected", true);
replace you for loop with:
jQuery(".ff_elem").val(title);
I have created this DEMO for you. Check it out.
Although You can iterate through all your option elements and find your option element, and then do this:
links[i].prop("selected", true);
but there is no need to iterate when you can simply let your select element do this for you as I have mentioned above.
This is actually how you can select an option based on the value your options have.
$('select').val('value of the option you want to select');
so use
$(".ff_elem").val(title);
Following your code, you could use:
links.eq(i).prop("selected", true);
if your jquery version is above 1.6+ then use this
links.eq(i).prop("selected", true);
else
links.eq(i).attr("selected", "selected");
It can be much simpler. Try something like this:
jQuery(document).ready(function(){
var title = jQuery(".fullVisaImg").attr("inselect");
jQuery(".ff_elem>option[value=" + title + "]").attr("selected", "selected");
});
links is a jQuery collection. When you loop through it, you're just getting the raw element, not a jQuery wrapped version, so you can't use .attr().
Use this instead at your problem line.
$(links[i]).attr("selected", "selected");
Related
I'm trying make a form. Where when you select an option, the empty value is removed and the color changes.
But, when you change the option, all empty values are being removed at the same time.
What i have to do to resolve this?
DEMO
$(document).ready(function() {
$('.changeMe').change(function(){
$('.empty').remove();
$(this).css({'color':'black'});
});
});
Thanks in advance
http://jsfiddle.net/Cjdbx/4/
$('.changeMe').change(function(){
$('.empty',this).remove();
$(this).css({'color':'black'});
});
You are removing all classes with empty. You have to only remove the one which is related. So, use this.
Try:
$(this).find('.empty').remove();
Demo
OK, try this:
$(document).ready(function() {
$('.changeMe').change(function(){
var $this = $(this);
$this.parents("div").find('.empty').remove();
$this.removeClass("blue");
$this.addClass("black");
});
});
Basically, you need first to find the parent div (containing the row) and remove any .empty descendants.
I'm using someone else's app and want to change the innerHTML in between any < a>< /a> tag that has a certain href. But these links don't have a class or ID associated with them and I can't edit the code to give them classes or ID's. Is there a way to grab a tag by its href in JavaScript? I wanted to do something similar to this:
var theLink = document.getElementByHref("example.com");
Otherwise, if that is not possible, can I loop through all the links in the page and choose the ones that have the certain href and innerHTML I'm looking for?
You can use a DOM3-attribute-selector (jQuery doc) to get all elements that contain a certain text in their href attribute. It would look like
$('a[href*="example.com"]')
However, that might not be what you actually want - not only urls to that domain might contain this string. You might do something like begins-with:
$('a[href^="http://example.com"]')
but to get an exact and possibly more complex match, you don't get around a custom filter:
$('a[href]').filter( function() {
return this.hostname == "example.com";
// or check other properties of the anchor element
})
Select all elements that have the example.com value in href attribute:
Live Demo: http://jsfiddle.net/NTGQz/
$('a[href*="example.com"]');
You can also try this, just to be more specific and following the OP "ideal" answer:
Live Demo: http://jsfiddle.net/ksZhZ/
jQuery.fn.getElementsByHref = function(str){ return $('a[href*="' + str + '"]'); };
$(document).ready(function(){
elems = $(this).getElementsByHref('example.com');
});
jQuery has a lot of selectors. The one you want here is the attribute selector.
$('a[href="example.com"')
You can use an attribute selector:
$('a[href="http://example.com"]')
With JQuery attribute selector, you can do this :
$('a[href="example.com"]')
Try this
$('a[href*="example.com"]');
This will select the link that has example.com in the href attribute..
$('a[href="http:google.com"]')
you can do it with jquery: http://api.jquery.com/attribute-equals-selector/
ex: linksToGoogle = $('a[href="http://google.com"]');
You can do this without jQuery.
var links = document.querySelectorAll('a[href*="example.com"]');
You can do this natively with querySelectorAll if your users are on IE8+ or any other browser. This method returns an NodeList of matching elements.
document.querySelectorAll('a[href="exact/value.html"]'); // exact match
document.querySelectorAll('a[href*="partial/value.html"]'); // partial match
document.querySelectorAll('a[href^="starts/with"]'); // href starts with
document.querySelectorAll('a[href$=".html"]'); // href ends with
Can anyone tell me why this works in older versions of jQuery (e.g. 1.4.2) but if you switch to a later version, e.g. (1.6 +) it stops working?
http://jsfiddle.net/nmvf6/1194/
$(function(){
$('#my_button').click(function(){
var unitName = "Unit2";
$('.assUnit').find('option[text="'+unitName+'"]').remove();
});
});
I have checked the error output in the console for the later versions, and an error seems to occur on the page load, before i've even got as far as it loading up my script and being able to click the button..
When I change the version to 1.8.0 for example and Run the page, this error comes up in my Opera scripts console:
Which seems to be in a "mootools" file..but I didn't select mootools, i selected jQuery 1.8.0
:/
Thanks.
You are using Attribute Equals selector which selects elements that have the specified attribute with a value exactly equal to a certain value, option elements don't have text attributes, you can use :contains selector instead, try this:
Select all elements that contain the specified text.
$(function(){
$('#my_button').click(function(){
var unitName = "Unit2";
$('.assUnit').find('option:contains('+unitName+')').remove();
});
});
FIDDLE
If you want to select the element that has only certain value you can use the filter method:
$(function(){
$('#my_button').click(function(){
var unitName = "Unit2";
$('.assUnit option').filter(function() {
return $(this).text() === unitName
}).remove();
});
});
FIDDLE
You will probably have more luck with this:
$('.assUnit').find('option:contains('+unitName+')').remove();
See also: :contains() selector
try this
$(function(){
$('#my_button').click(function(){
var unitName = "Unit2";
$(".assUnit option:contains('"+unitName+"')").remove();
});
});
How can I add or remove dropdown items dynamically in jQuery? Below code is not working
$("#dropdownId").remove("<option value='12'>testing</option>");
$("#dropdownId").add("<option value='12'>testing</option>");
Can anyone suggest a way to do this?
To add elements, use .append():
$('#dropdownId').append('<option value="12">testing</option>')
or .appendTo():
$('<option/>', { val: 12, text: 'testing' }).appendTo('#dropdownId');
To remove, use .remove() differently:
$('#dropdownId').find('option').filter(function ()
{
return this.value === '12' && $(this).text() === 'testing';
}).remove();
As a general recommendation, you should really read the API docs for simple jQuery questions like these. If you had read the documentation for .add(), for instance, you'd see that it does not do what you thought.
Use a standard selector for the item you want to remove, rather than passing html markup:
$('#dropdownId option[value="12"]').remove();
// or
$('#dropdownId').remove('option[value="12"]');
(I'm assuming you don't have more than one option with the same value.)
The (approximate) opposite of .remove() is .append():
$("#dropdownId").append("<option value='12'>testing</option>");
Remove:
$("#selectList option[value='2']").remove();
Add:
$('#selectList').append('<option>'+val+'</option>');
Use append instead of add !
add is not writing method.
use append() like,
$("#dropdownId").append("<option value='12'>testing</option>");
here's some information from jQuery API: http://api.jquery.com/append/
I want to get all elements from the web page.i used form id or name to get all elements but if there is no form id or name i can't get elements from that page.what is the alternate for this problem. please help.
You can retrieve an array of all nodes in a html document using document.getElementsByTagName('*'). After that you can iterate through that array:
var allElements = document.getElementsByTagName('*');
for (var i=0;i<allElements.length;i++){
//do things with the element, e.g.
//console.log(allElements[i].type)
//console.log(allElements[i].id)
//console.log(allElements[i].innerHTML)
}
Update 2014: a more modern approach would be
var allEls = [].slice.call(document.querySelectorAll('*');
allEls.forEach( function (el) {
//do things with the element, e.g.
//console.log(el.type)
//console.log(el.id)
//console.log(el.innerHTML)
});
You can use jQuery: $("html *") which will return all elements between the html tags
for names you must use $("html *").attr('name')
for values $("html *").val() or $("html *").attr('value')
Have heard of something called jQuery ? With the help of traversing API you can get to an element you want. Here is the complete list of API - http://api.jquery.com/
You can use the jQuery selectors like: $("*") .This particular selector will return all the elements(tags) of that html page.
maybe you can try this: document.childNodes
no framework, lib needed.