Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I know the javascript to pass id when an event is triggered as below
<td><a id="applyChange_${(loop.index)}" onclick="javascript:applyChange(this);">
function applyChange(obj){
console.log(obj.id;) // this returns the id of the element
}
But how, the same can be written in jQuery?
Add class to your a tags and remove inline event binder
<td><a id="applyChange_${(loop.index)}" class="applyChange">
With this structure you can write Jquery selectors on classes, And on click of any element with the class applyChange you can gets that particular clicked elements id by using $(this).attr('id')
So the script would be like
$('.applyChange').on('click',function(){
console.log($(this).attr('id'));
});
I would do something like this if you just want to get the index:
<a class="applyChange" data-id="${(loop.index)}">
then setup the click event when the page loads (assuming these are dynamically created)
$(document).on('click', '.applyChange', function () { console.log($(this).data('id')) });
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I am trying to find the appropriate way to edit an element but it seems like their is only one node with an ID. I have thought of
my code looks like:
var root=document.getElementById("app-mount").childNodes;;
var child = root[n].innerHTML;
But this is not reusable to get the path to any element such as $0 used in chrome dev tools. I was wondering if there was a method one could call on $0 to just give me the path so one could know how to target it as one does for an ID document.getElementById('id');
Edit:
after getting help I have updated my code to look like:
document.querySelectorAll('svg')[1].outerHTML="<img id='orb' class='orb' src='https://i.imgur.com/k3d8qMN.gif' width='50' height='60'>"
Its for a theme I am making for discord!
Thanks for the help!
I am not sure that I am following your question very well, but if I understand you correctly, you are looking for something like querySelector or querySelectorAll.
You can use CSS commands to target various HTML elements. eg:
document.querySelector('div'); //returns the first div
document.body.querySelectorAll('div'); //returns all the divs attached to the body element
You can also target ids:
document.querySelector('#app-mount');
or classes:
document.querySelector('.blue');
and query selectors may also be used:
document.querySelector('#app-mount > ul > li:nth-child(3)');
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
What is the difference between $("<div />") vs $("div") ?
$('<div/>') : This creates a new div element. However this is not added to DOM tree unless you don't append it to any DOM element.
$('div') : This selects all the div element present on the page.
So, the code $('<div/>').addClass('myClass') will create a new div element and adds css class called myClass. And
$('div').addClass('myClass')
will select all the div element present on the page and adds css class myClass to them.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have added a new element dynamically through jQuery like this:
var elem = $('#unique').append($('<span>').attr('data-rollNo', i));
Now I need to use this element after this to add something to it. Is there a way I can store a reference to this element here, so I done need to search the entire DOM every time I edit this?
Use appendTo method instead of append:
var $span = $('<span>').attr('data-rollNo', i).appendTo('#unique');
Now, span is appended and you also have a reference to this new object.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
How does this page accomplish the (guided scrolling?) technique between two divs, where with just a small flick on the scroll pad it takes you to the next element?
http://sourcing.alibaba.com/buyermarket/buyer_market_home.htm?tracelog=alihomelink
If you want a library, I'd suggest fullPage.js. I used it in a recent project and it does the trick without even bother.
There are a number of methods to achieve this. One of them is jQuery Mousewheel.
Here is a simple example of how it works:
$('#my_elem').on('mousewheel', function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
// using the event helper
$('#my_elem').mousewheel(function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
See a working example here: http://jsfiddle.net/DgmWs/5/
Didn't check what library they are using as they are more than likely using a function in jquery or dojo to do this for them but in terms on pure js and dom intereaction. They are doing something like this
window.onscroll = function (oEvent) {
// called when the window is scrolled.
var el = document.getElementById('#someid');//could be selecting the element by class or other means
el.scrollIntoView(true);
}
See the docs for more details:
https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView
https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want so save states of containers in any tags of them to use it with jQuery. The problem is JS says undefined if I use data-xy and data() or attr().
What is the best way to achieve this?
Had this a lot of times. the data attribute will be lowercase, always.
Say:
<div id="hello" data-testHello="HelloThere">Test</div>
The data will still be accessed by:
$('#hello').data("testhello"); rather than "testHello".
Hope this helps.
Create an object with property as the id of div or element, and the value.
<div id="foo"><span>this is a test</span></div>
For set the state
var stateStore = {};
stateStore["foo"] = "dirty";
For access to the state
$("div").each(function(){
MakeAnythingWithIt(this);
})
function MakeAnythingWithIt(theElement)
{
var elementState = stateSore[$(theElement).attr("id")];
}
Another way is append an input type="hidden" with the state information