In my program, there are some links that will be created at run-time. They will contain the name of users which are selected from table. There is no id or name attribute set on these links.
How can I get the name of user corresponding to each link when I click on them?
You can do this using jQuery like so:
$('a').click(function(){
var user_name = $(this).text();
});
You can get a variable that points to the calling element in just plain Javascript like this.
Javascript:
function myFunction(link)
{
alert(link.innerText);
return false;
}
Html:
Bob
You can get the HTML element using 3 different functions which are:
document.getElementById(id);
document.getElementsByTagName(tagName);
document.getElementsByName(name);
use any of the following..
var links = document.getElementsByTagName("a");
for(var i=0;i<links.length;i++)
{
var value = links[i].value;
}
Could you use the nth-child selector? It selects an instance of a link based on the order it appears in the document, without using an ID or Class.
a:nth-child(2) {
}
http://css-tricks.com/how-nth-child-works/
Related
I'm trying to hide certain tags by using one ID element, but seem like it only hide the first tag with the ID element that I used.
DEMO : http://jsfiddle.net/mgm3j5cd/
How can i solve this issue? I wanted to hide the tag only with the ID element that I've declared. Appreciated for helps
You have this tagged as CSS, so the following CSS in your page's stylesheet will work:
#hide {
display: none;
}
Edit:
If you must only use JavaScript, you can do the following. Keep in mind that your document is already technically invalid by having multiple elements with the same ID, so this approach may not work in every browser. (I tested with Firefox 32).
Working JSFiddle: http://jsfiddle.net/88yw7LL9/2/
function hideByID(string) {
var element = document.getElementById(string); // get first matching element
var array = [];
while(element) {
array.push(element);
element.id = string + '-processed'; // change ID so next call gets the next matching element
element = document.getElementById(string);
}
for(var i = 0; i < array.length; i++) {
array[i].id = string; // revert ID to previous state
array[i].style.display="none"; // hide
}
}
hideByID('hide');
The simplest solution should be to assign 'class' attribute to certain elements you want to hide, like :
.XXXX
{
display:none;
}
Perhaps, you want to specify some elements hidden with id, like :
#id1 , #id2
{
display:none;
}
or
div#id1 , div#id2 //more accurate
{
display:none;
}
but, unfortunately, you can't hide elements you want by using one ID.
I link to a page like page.html#id so the page is automatically focused at this id.
How do i do this in CSS that only the div with the id from the URL gets for example a yellow background?
Thanks
Use the :target pseudo selector.
http://css-tricks.com/on-target/
Get the hash value and style it using JavaScript:
if(window.location.hash) {
var hash = window.location.hash.substring(1); //the variable without hash sign.
document.getElementById(hash).style.background = "yellow";
}
Edit - didn't know about :target. That answer is better!
You could listen for the hashchange event, detect the current hash and apply a class to the corresponding element:
window.addEventListener('hashchange', function() {
// Remove .active from any currently active elements
var active = document.getElementsByClassName('active');
for(var i = 0; i < active.length; ++i) {
active[i].classList.remove('active');
}
var id = window.location.hash.substr(1);
document.getElementById(id).classList.add('active');
});
If you need to support browsers that do not support classList, there are plenty of alternatives.
JSFiddle
This w3schools page mentions the HTML DOM createElement() Method. For example, you can create a button by
var btn=document.createElement("BUTTON");
However, how can I add ID/class to this button? And what else can I do with it?
One way with Javascript, is by using setAttribute:
element.setAttribute(name, value);
Example:
var btn=document.createElement("BUTTON");
btn.setAttribute("id", "btn_id");
btn.setAttribute("class", "btn_class");
btn.setAttribute("width", "250px");
btn.setAttribute("data-comma-delimited-array", "one,two,three,four");
btn.setAttribute("anything-random", document.getElementsByTagName("img").length);
The advantage of this way is that you can assign arbitrary values to arbitrary names.
https://developer.mozilla.org/en-US/docs/Web/API/element.setAttribute
You could assign to its property:
var btn=document.createElement("BUTTON");
btn.id = 'btn_id';
btn.className = 'btn_class';
I want to know if an anchor link is clicked.
I add anchor links dynamically and set ids with their name file but i dont know how amoutn the number of the cell "clicked" in my Spreadshett.
For ex: the id of file "test.pdf" --> test;
in spreadsheet:
ex:
ColumA <namefile>: test.pdf
ColumB <linkfile>: https://docs.google.com/document/d/1PiMj.....jramcs
ColumC <cliked>: 1
I'm specting that if i clicked my anchor my function could know which anchor is cliked and amount " 1 " in colum C in the ppropriate row.
var html = app.createAnchor(nf, hf).setId(nf);
I am trying to make something like:
var html = app.createAnchor(nf, hf).setId(nf).addClickHandler(app.createServerHandler("sumDoc").addCallbackElement(flexTableDoc));
¿But how i know which anchor is cliked in the function sumDoc?
I think you can get that using client handlers and a textbox (this last one can be visible or not).
var clickedItem = app.createTextBox().setName('clickedItem')
On each anchor you add a clickHandler like this
var handler = app.createClientHandler().forTargets(clickedItem).setText(Anchorname);
anchor.addClickHandler(handler)
and in the server handler you will get the textBoxValue with
var clickedItem = e.parameter.clickedItem;
if you want a more accurate code you should provide the code you use to create the UI with the anchors
This is also possible and easy, format your anchor like you said.
var html = app.createAnchor(nf, hf).setId(nf).addClickHandler(app.createServerHandler("sumDoc").addCallbackElement(flexTableDoc));
Now your return function:
function sumDoc(e){
//this will return the value of the ID of the element thats clicked so in this case its test.pdf
var linkId = e.parameter.source;
}
I hope this is useful
I am using Jquery 1.7.2.
I want to transverse Html Elements Till a Specifc Attribute (id) using Jquery on
mouse over on any html element in my page.
we have parents() function but problem is how to select stop on the parent element which has id attribute
$("*", document.body).click(function (e) {
e.stopPropagation();
var domEl = $(this).get(0);
var parentEls = $(domEl).parents()
.map(function () {
return this.tagName;
})
.get().join(", ");
$("b").append("" + parentEls + "");
});
this is code but i am getting all element till root
but i want to stop on a closet elements which has attribute id in the tag
Please help me out .
Just use closest:
$(this).closest('#the-id');
Unless your'e just looking for the closest one that has any id attribute, which would be:
$(this).closest('[id]');
Edit: after seeing your updated question, this should be what you want:
$(document).click(function(e) {
e.preventDefault();
var parents = $(e.target).parentsUntil('[id]')
.map(function() { return this.tagName; }).get().join(',');
console.log(parents);
});
Note that this approach accomplishes what you want without selecting and binding click events to every node in the DOM, which is a pretty heavy handed approach.
Edit (again): looks like maybe you wanted to include the tag with the id attribute on it (the above solution is everything up to, but not including that tag). To do this, the solution is pretty similar:
$(document).click(function(e) {
e.preventDefault();
var $parents = $(e.target).parentsUntil('[id]');
var tagNames = $parents.add($parents.parent())
.map(function() { return this.tagName; }).get().join(',');
console.log(tagNames);
});
It looks like you want to map the hierarchy from the clicked element up to the document root. In that case, you can apply parents() to event.target:
$(document).click(function(e) {
e.preventDefault();
var parentEls = $(e.target).parents().map(function() {
return this.tagName;
}).get().join(", ");
});
Note that, as jmar777, you should also change your selector: "*" adds an event handler to all the elements, which is probably not what you want. Bind a single handler to document instead to take advantage of event bubbling.