I am having a doubt in jQuery array object.
Let me describe briefly: I am having two arrays called brandsLink andfloorLink.
when user will click any link, I am storing that particular brand name inside a variable called brandName, and the variable I am checking inside the second array. If it's found then I will write some other method. I am attaching a image for reference. I think it will help.
Here is the code:
$('document').ready(function() {
var brandsLink = $('.brandLinks li a[id]');
var floorLink = $('#orionPlan .mapContainer area[id]');
brandsLink.click(function(e){
var brandName = this.id;
if(brandName == floorLink.find(brandName)){
console.log('yes both are matching.');
}
else {
console.log('sory.');
}
});
});
thanks,
naresh kumar
You cannot use ID in this manner. An ID has to be unique in the document.
Your find call would search for 'someID' when it should search for '#someID'
If you did find a match, you would be comparing 'someID' to a DOM node
You would need to switch to using classes, or prefix your ID's to make them unique (eg. floor-, brand-). You would also need to change your comparison.
Given the following markup:
<ul class="brandLinks">
<li><a id="brand-zara" data-name="zara">Zara</a></li>
...
</ul>
...
<map name="..." class="mapContainer">
<area id="floor-zara" data-name="zara" shape="rect" coords="..." />
...
</map>
Your click handler could say:
brandsLink.click(function() {
var name = $(this).data('name'); // name = "zara"
var match = floorLink.find('#floor-' + name);
if(match.length > 0) {
console.log('a matching area was found in floorLink');
} else {
console.log('sorry.');
}
});
Related
I currently have the following:
$(window).load(function(){
$(".boxdiv").click(function () {
$(this).toggleClass("selected");
});
});
Which perfectly does the first part of what I need. I have a fair amount of div's with the class "boxdiv" and they each have a unique ID that will identify it. What I need to happen is to have some kind of button that when pressed sends all of these div ID's with the class selected, to the next page.
Anyone got any idea of how I can do this?
Map the ID's in an array, and use $.param to create a querystring
$('button').on('click', function() {
var id_arr = $.map($(".selected"), function(el) {return el.id;});
window.location.href = '/next_page?' + $.param({ids : id_arr});
});
EDIT:
$('button').on('click', function() {
var id_arr = $.map($(".selected"), function(el) {return el.id;}),
qs = encodeURIComponent(id_arr.join(','));
window.location.href = '/next_page?ids=' + qs;
});
Perhaps this is what you're looking for:
$(".button").click(function(){
var id_arr = [];
$(".boxdiv").each(function(){ // Loop through each element with that class
id_arr.push($(this).attr('id'));
}); // Loop through each element with that class
});
window.location = 'next.html/ID=' + id_arr.join(',');
The ID's should be stored in id_arr
You can loop over each div that has the class selected. You can then use attr() to access the ID names.
Javascript
var ids = [];
$.each($(".selected"), function() {
ids.push($(this).attr('id'));
});
ids = ids.join(',');
HTML
<div id="boxA"></div>
<div id="boxB" class="selected"></div>
<div id="boxC" class="selected"></div>
<div id="boxD"></div>
This should return ["boxB", "boxC"]
See: http://jsfiddle.net/B4V28/1/
All of the answers submitted are in fact correct - but I think the real issue is your expectation of what jQuery is doing for you.
jQuery will gather all of the ID's in any manner, but you will need to have a way to collect them on the next page and actually do something with them. This will all need to happen server side.
Most likely, the ideal method, based on your comment of "potentially there could be many" you would want to do a mapping (see other answers), and pass the json object to your server, where it can pass it to the next page.
With the same code -
$('button').on('click', function() {
var id_arr = $.map($(".selected"), function(el) {return el.id;}),
qs = encodeURIComponent(id_arr.join(','));
alert('/next_page?ids=' + qs);
});
Here is a fiddle for you - http://jsfiddle.net/kellyjandrews/4dYfh/
I have this html code.
<div class="breadcrumb">
Home
<a class="breadcrumb" href="#">About</a>
<a class="breadcrumb" href="#">History</a>
Message from our Founding Members
</div>
Using javascript I want to get the text from the div ".breadcrumb". The problem is the a tag under the div also has a class with the same name, when I run this code:
var names = document.querySelectorAll('.breadcrumb');
return [].map.call(names, function(name) {
return name.textContent;
});
My first element of the array gets the textContent of all the a elements and also the div.
How can I do to get the text of only the div. In this case I want to return only "Message from our Founding Members".
Is there a way to select only the root item of the html, when they have all the same class ?
Thanks
If you want to get the text from the <a> tags with the class="breadcrumb", you can do that by using more specific selectors that include the tag type like this:
var items = document.querySelectorAll("div.breadcrumb a.breadcrumb");
var text = [];
for (var i = 0; i < items.length; i++) {
text.push(items[i].textContent);
}
Working demo: http://jsfiddle.net/jfriend00/kVwH8/
If, what you're trying to do is to get the "Message from our Founding Members" text (I wasn't entirely clear from your original question), then you can do that like this::
var items = document.querySelectorAll("div.breadcrumb a.breadcrumb");
// get node after the last item (that should be the desired text node)
var txtNode = items[items.length - 1].nextSibling;
console.log(txtNode.nodeValue); // Message from our Founding Members
Working demo: http://jsfiddle.net/jfriend00/kynuE/
use div.breadcrumb because that will give you divs with class breadcrumb, not a tags.
You can do this:
var names = document.querySelectorAll('div.breadcrumb')[0].childNodes;
var text = Array.prototype.reduce.call(names,function(prev,node){
if(node.nodeType === 3) return (prev || '' + node.textContent.trim());
});
console.log(text);
There are a lot of ES5 stuff here like trim and reduce so better have those polyfills handy.
I must have made a mistake somewhere so the document.getElementsByClassName().innerHTML is always returning undefined.
First i generate the <li> via javascript :
$('#list').append('<li class="box"><img class="picture" src="images/HotPromo/tagPhoto1.png"/><p class="name"><b>Name</b></p><p class="address">Address</p><p class="hidden"></p></li>');
Note that in the most right i have a <p> element with hidden class. I use this to get the id which i dont want to show to my users.
And this is the jQuery to generate the data on those <li> :
$(".box").each(function () {
var name, address, picture, id = "";
if (i < result.length) {
name = result[i].name;
address = result[i].address;
picture = result[i].boxpicture;
id = result[i].mallid;
}
$(this).find(".name").html(name);
$(this).find(".address").html(address);
$(this).find(".picture").attr("src", picture);
$(this).find(".hidden").html(id);
i++;
});
I have tried to check the data, and its working fine.
Now, lets say i want to alert the hidden id <p> when user clicks one of those <li class="box"> that i generated above:
$(".box").click(function () {
alert(document.getElementsByClassName('hidden').innerHTML);
});
However this alert always returning "undifined".
document.getElementsByClassName() returns a nodeList, not an element!
So it should be :
document.getElementsByClassName('hidden')[0].innerHTML
and as you probably have more .hidden elements, and only want the one inside the current .box (which would be this in the event handler)
this.getElementsByClassName('hidden')[0].innerHTML
but why not jQuery
$(".box").click(function(){
alert( $('.hidden', this).html() );
});
I m new to jquery. My requirement is to pass rowid(unique id of each record of a table) in a jquery function. I can get rowid only at runtime. so how can I bind click event to the tag whose id is this rowid.
Upd
Del
$(what to pass here).bind('click',function(ev) {
_operation(para1,para2); // function which is going to perfom action
ev.preventDefault();
return false;
});
get the id , and acording to id do what ever you want
$('a').on('click',function(){
var id = $(this).attr('id');
if(id == //what you want)
{
//function 1
}
else
{
//function 2
}
return false;
});
If there are any similarities between the IDs, you can use one of the attribute selectors such as:
ID contains
$('[id*="something"]')
ID begins with
$('[id^="something"]')
http://api.jquery.com/category/selectors/
A better approach would be to place all of the dynamically named anchors into a container, and then select on that:
<div id="container">
<a ...></a>
<a ...></a>
</div>
Then you would select all the child anchors:
$('#container > a').click(...);
It's hard to find a good selector from so few HTML code. Use a class on your markup if possible:
<a class="roww" href="javascript:void(0)" id="`string(rowid(Gatepass))`">Upd</a>
<a class="roww" href="javascript:void(0)" id="`string(rowid(Gatepass))`">Del</a>
then you can use $('.roww') to query your nodes.
Here's what you can do to get the id from the event handler:
function( ev ) {
//wrap the element with jQ:
var jel = $(this);
//Then access attributes with .attr() getter:
var id = jel.attr('id');
... //do whatever you want now.
... // there's a quicker alternative to get the id without jQuery, simply:
... // var id = this.id
}
if the id comes dynamically from the server, put inside the function the same id + hash for id selctor
$(what to pass here) => $("'#" + string(rowid(Gatepass)) + "'")
is there a way to reset/update an after() element? Not add another after() text. Thank you
Maybe this will helpful.
(Controller function for Emptiness of Form to be sent Server Input parameter ID of Form Parent DIV, output is 1-true, 0 false)
function emptynessCntrl(elementosForControl){
var controlResult=1;
$(elementosForControl).find('input').each(function() {
if($(this).val().trim()===""){
controlResult=0;
console.log($(this).attr('id')+' Element is empty');
$(this).nextAll().remove();
$(this).after('<div class="err-label">'+$(this).attr('placeholder')+' is empty</div>');
return controlResult;
}
else{
$(this).nextAll().remove();
}
});
return controlResult;
}
Your question is not clear. I'll asume you want to modify an element added with .after()
Instead of doing this:
$("#elem1").after('<div id="after />");
You could do this (use insertAfter)
$('<div id="after" />').insertAfter("#elem1").attr("width", 200).html("hi") ...;
Hope this helps.
Cheers.
When you add the element, give it a name
var newElement = $('<span>Some new stuff</span>');
$('.whatever').after(newElement);
Then, when you want to change it, simply remove the previous one first
newElement.remove();
newElement = $('<div>And now for something completely different</div>');
$('.whatever').after(newElement);
You can write a function that uses .data() to remember the new element as such: (I would change the names a bit though)
$.fn.addUniqueSomething = function (content) {
var existing = this.data('something-that-was-already-added');
if (existing) {
existing.remove();
}
var something = $(content);
this.after(something);
this.data('something-that-was-already-added', something);
};
Then you can use
$('.whatever').addUniqueSomething('<span>Some new stuff</span>');
// and later...
$('.whatever').addUniqueSomething('<div>And now for something completely different</div>');
And the second one will replace the first