How to use jquery with an element? - javascript

I am trying to find child of a specific element with jquery. But i couldn't figure out how to use jquery functions on an element that is already selected. For example i already select a div and i want to reach it's child span.
I tried selectedElement.$('span') but it didn't work as expected;
selectedElement = e.target;
console.log(selectedElement.$('span'));
It says $() is not a function. How would i use jquery after selecting an item like this?

If you want to write it in jQuery I would do it like this:
$('div').click(function() {
console.log($(this).find('span'));
});
When you click a div the output will show you the element span in that div.

Related

Select objects after selecting a div and an index

I have a couple of same-named divs inside the other div, I would like to select the first div inside the main div and continue selecting data inside it.
So this is what I did:
$('.main > div')[0]
But now I can't $('.another') from inside that selection.
How can I keep on selecting from inside the div I already selected?
First:
Use .first() instead of [0]. .first() is the proper jQuery way to get the first Element of your selection as a jQuery Object.
Second:
Find children of that div using .find(). With .find() you can search inside a jQuery Object for it's descendants using a selector.
$('.main > div').first().find('.another')
should do the job in your case.

DIV with two tags?

I know how to deal with more than one class in div but I never seen something like that:
<div data-reactroot>
</div>
It is not a class, not a ID it looks just like multiple tag. How am I supposed to select it with jQuery? I tried
$('div data-reactroot');
But it seems that I'm not even close to it.
Try to use has attribute selector at this contex,
$('div[data-reactroot]');
Since data-reactroot is an attribute of div element.
As written, it is an attribute and here is how to get it with plain javascript using the querySelector
var elem = document.querySelector('div[data-reactroot]');

Modifying all element in a class with js

I am trying to hide/show a class of elements in a form depending on a drop-down menu choice made by the user. See: http://jsfiddle.net/3FmHK/2/
I am new to js and have two problems, so maybe they are obvious, bear with me.
1) I am modifying by the div id, so only the first element changes (and not in this fiddle for some reason, but it does in the project). However I want all the elements of a class to modify and I haven't been able to make that work. So how do I modify the style="display" for an entire class, rather than a single element?
2) The remove does not work for newly added element, when the form is returned with values in the project, they are removable. Using firebug, the code looks identical for the GET return generated elements vs the user added elements, as far as I can tell. Why does the remove function not work for newly added elements?
I recommend using jQuery for this if you can. You can use the .on() feature to bind actions ot newly created elements and use the class selector to .hide() all classes then .show() the currently selected on by id.
It would look something like this:
jQuery(document).ready( function() {
jQuery(document).on('click', '.classname', function() {
jQuery('.' + jQuery(this).attr('class') ).hide();
jQuery(this).show();
// Or you can use the following to show a specific ID element.
//jQuery('#idtoshow').show();
)};
});
This will hide all elements with the class name. You will need to include the jQuery library before your script. Although I am only using show and hide here, you can use .remove() as long as you bind your action with .on and not just .click. You need .on to bind to newly created elements.
http://api.jquery.com/on/
Hope this helps.
Try:
$(this).parent('div').first().remove();

jQuery Parent Class Attribute

I want to add a slide up affect with jQuery to a DIV when a link inside of the DIV is clicked, but the problem i am running into is the class of the DIV's are defined by a loop. So, i can't define the DIV class in the jQuery line, because each DIV class is different and i cannot determine ahead of time what they are. I am trying to use .parent and .child but I am not sure how to go about this. Is this making any sense?
Bind to the click of the element you want (in this case I just used a simple anchor element). Then find the first parent that is a div and perform the slideUp() effect.
$('a').click(function() {
$(this).parents('div:first').slideUp();
});
You can see it work here: http://jsfiddle.net/XNnSp/
Let me know if that's what you are looking for http://jsbin.com/ehoza3
$('a').click(function() {
$(this).parent().slideUp();
});
Two (most obvious) ways
FIRST
If your tree is always defined in terms of depth you could access your parent DIV doing just that:
$(this).parent().parent().parent().slideUp();
SECOND
Add an additional class that doesn't clash with dynamic ones and do this:
$(this).closest(".some-custom-class").slideUp();

Remove dynamically added elements

I've looked through some of the other posts but couldn't find an answer, so sorry if this is a somewhat stupid question.
I have a div
which I add span elements dynamically to, like <span id="agolf-squirecreek1.jpg">golf-squirecreek1.jpg</span>. I need to remove these elements dynamically as well when clicked on. I have the click event linked with .live(), but the remove() wont work on it. Any ideas?
Try to use .remove
http://api.jquery.com/remove/
Or
Why dont you hide the element on click using
.hide()
or by putting style or class. .add() or .addClass
or replace the html itself by .html or .text
This will remove a span when clicked within the context of div#id.
$('div#id').delegate('span', 'click', function() {
$(this).remove();
});
If you want to remove everything within an element you can use .empty() and furthermore, if you want to remove a span element but retain its event handlers/data object you can use .detach() which is useful if you intend to add the element back to the DOM.

Categories

Resources