How select element in previously generated html code using jQuery? - javascript

I'm generating a options elements for select el. And after document ready, I need do each() for all this elements. How can I do this?
ps I know how select this elements after some events, live(). But now, it's impossible.

you mean something like this ?
$(document).ready(function()
{
$('#id-select').find('option').each(function()
{
// do something with option - saved as $(this)
});
});

You can try this script
$('#myselect option').each(function(){
alert($(this).val());// option element
});
http://jsfiddle.net/gJeGK/

Related

Jquery remove element

I am basically trying to print the value of a button in the div with list class if the button is selected. Also remove the same value wwhen it is deselected. I am able to print the value successfully but not able to remove it. Could somebody please help me out with it.
var buttonSelect = $(".btn").click(function() {
if ($(this).hasClass('active')){
$(".list").append(this.value + " ")
}
else {
$(".list").remove(this.value)
}
});
You should rather append the content along with html element like span:
$(".btn").click(function() {
if ($(this).hasClass('active')){
$(".list").append('<span class="newval_'+this.value+'">'+this.value + "</span>");
}else{
$(".list").find('.newval_'+this.value).remove();
}});
The parameters from .remove() is a selector, just having a value in there that contains the content of the element you want to remove will not work. For example if I had this:
<li class="list">test</li>
Doing $(".list").remove("test") will not remove it. You will probably want to use the :contains selector (since you may have the value with spaces at the end). So in the example above doing $(".list").remove(":contains('test')") will remove the element. You can do the same thing in your case:
$(".list").remove(":contains('"+this.value+"')");
If you want to remove the element itself along with everything in it, just use jQuery’s remove() method.
$(document).ready(function() {
$("button").click(function() {
$("div").remove(); //remove Div element
});
});
You can see an example here: How to Remove Elements from DOM in jQuery

jQuery - Select everything but

I want to use jQuery to select everything on a page except a certain div. My question is similar to this answer, but that solution selects only divs, I want to select everything.
In this example Fiddle, I want to select everything that does not have, or not the descendent of an element with, a class of "kids". So clicking on the "grandkids" and "kids" should not show a log entry, but clicking on the "parent" or the image would.
The page will have a very complex structure so something like this wouldn't be feasible.
You can try the not selector
$('body *').not('.kids, .kids *');
or if you are trying to register an event handler then
$(document).on('click', ':not(.kids, .kids *)', function(){
})
use this code, this code exclude .kids element and inner elements of .kids class
$('body').click(function(e) {
if(!$(e.target).closest('.kids').length){
console.log(e.target);
}
});
DEMO
Use e.currentTarget in jquery
$("#parent").not($('.kids')).click(function(e) {
console.log(e.currentTarget);
});

jQuery variable (select in html)

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");

find select option by text

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 to get all elements between html tag?

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.

Categories

Resources