How can I use adjacent sibling selectors with "this" in JQuery? - javascript

I have a list of various divs all with the same class. I am using the .each function to select individual ones on the user click (just as an example), and any actions after that naturally require this, so that it only selects the div in question. For example:
$(".div").each(function(){
$(this).click(function(){
$(this).css("background","green");
});
});
But what if I wanted to make the next element in line turn green as well on the click? My first instinct would be to use adjacent sibling selectors but it appears that only works when using two absolute elements, i.e. $(".element1 + .element2"). I can't seem to get it to work with this.
Here is a JSfiddle with a full example to play around with.
How can I do this?

You are looking for $(this).next()
http://api.jquery.com/next/
http://jsfiddle.net/naad8wbr/3/
$(".div").click(function () {
$(this).next().css("background", "green");
});
If you want both the next and this, then you could use:
$(".div").click(function () {
$(this).next().andSelf().css("background", "green");
});
http://api.jquery.com/andSelf/
http://jsfiddle.net/naad8wbr/4/

jsFiddle Demo
In order to "make the next element in line turn green as well on the click" you will have to add to the set of elements in the jQuery object.
You can use nextElementSibling MDN in correlation with jQuery's add
$(this).add(this.nextElementSibling).css("background", "green");

Related

Using each in jquery with a click event for a button that corresponds to a paragraph

Currently I have three buttons, each with an ID that corresponds to their order. When a button is clicked a paragraph that corresponds to that order should hide itself with .hide().
My problem is how do you use .each() to loop though the buttons by finding which has been clicked using a click() event to hide the corresponding paragraphs?
Bind a click event to all of your id's that start with something, let's assume "order-#", then traverse to the closest <p> element and hide it.
$('[id^=order-]').click(function(){ $(this).closest('p').hide() });
You can use each to traverse all the buttons (identified by a common class) adding a click-handler which will make use of the button's id to select and hide the appropriate paragraph. Something like
$('.button').each(function (buttonIndex, buttonEl) {
$(buttonEl).click(function () {
$('.par' + $(this).attr('id')).hide();
});
});
Here's the relevant fiddle.
Note that there's many ways to avoid using the button's id to target the appropriate paragraph, for example by using the buttonIndex param above.
And generally speaking - as ohgodwhy's answer indicates - there's ways of doing this in an altogether more concise manner.

Events using $(this)

My issue here is primarily jQuery...
I'm wanting to have events fire when a certain interaction is carried out however... only for "this" particular item provided all items are identical.
Firstly I'm not sure why the hover state is not firing - the console log shows the interaction is there however, not triggering the div to appear. I need the "show-me" div to appear when only hovered on the span and mouseoff for the div to disappear.
Also when the user clicks "select" for the options to ONLY hide for the current item input they selected - not all options to hide.
I'm having trouble trying to find a way to select elements that are somewhat out of scope as .find() will only find descendants - I want to have my mark up elsewhere and be able to select the element regardless of where it's location is within the markup.
Here is a JSFIDDLE of a working example for you to potentially "fiddle" with ;-)
All suggestions welcome!
Here is my jQuery
//Show item on hover for current item hovered
var item = $('.item'),
itemShow = $('.show-me');
item.hover(function() {
$(this).nextAll('.show-me').show();
console.log("hovered");
}, function() {
$(this).nextAll('.show-me').hide();
});
//Click select to hide options
$('.item').find('input').on('click', function() {
$(this).nextAll('ul').hide();
console.log("select was clicked");
});
Your tree traversal is incorrect using nextAll which is for siblings.... use find() for descendents
$(this).find('.show-me').show();
DEMO
Refer to API Docs
In addition to charlie's answer, you may also use .children(),
$(this).children('.show-me').show();
JSFIDDLE

Hiding the <p> and showing the <textarea> on a <a> click

I know the title sounds quite easy but the real problem is the markup. I have a link in a div which also in another div but the textarea and the paragraph are in another div so that's why I am having problem on how to show and hide elements in a completely different markuped div from a completely different markuped div.
I saw .parent() and .children() and .siblings(). But they couldn't help me or I think that I was not able to take help of those.
Here's the fiddle.
Here is the JS I tried:
$(".no_link").click(function(e) {
e.preventDefault();
});
$(".edit_offer").on('click', function() {
$(this).parent().parent().siblings().children("textarea").toggle();
});
You can use these selectors, but it will rely on the class username being in the heirarchy as you have in your code:
$(".edit_offer").on('click', function () {
$(this).closest('.username').find("textarea").toggle();
});
jsFiddle example
.closest() will traverse up the DOM until it hits the element with class username, then .find() will go down through the children looking for the textarea.
I did it using find(). http://jsfiddle.net/SZUT8/2/ To make the script more accurate and future-proof you could consider adding a class to the paragraph and matching it, as in here: http://jsfiddle.net/SZUT8/4/
You could always assign an ID (or a class, for multiple) to each of the desired elements ("p" and "textarea" in your case). Then use your ID/class to reference them for the show() or hide() methods, rather than navigating the DOM via parent(), sibling() and children().
Then your click handler will only need the line:
$('#idOfElement).toggle();

How to set jQuery mouseleave function for multiple divs with same id

I have a site that has multiple divs with the same id name. I want to set a mouseleave function for all of the divs that have this id. In my $(document).ready function I have this code...
$('#my_post_container').mouseleave(function(e)
{
hideSnippet();
});
My hideSnippet() function is correct, but doing this only set the mouseleave function for the first time that a div comes up of id my_post_container. Is there a way to set the mouseleave function to all divs with this id?
I have a site that has multiple divs with the same id name.
Then you need to fix that. You must not have more than one element with the same id. id values must be unique on the page.
You probably want to use class instead, at which point your code is basically fine:
$('.my_post_container').mouseleave(function(e)
{
hideSnippet();
});
...although it coudl be shortened a bit if hideSnippet doesn't care what arguments it gets, doesn't care about this, and doesn't return false:
$('.my_post_container').mouseleave(hideSnippet);
It is invalid HTML to have multiple objects with the same id. As such, you cannot use normal selectors to find them all and you should fix your HTML to not do that.
The #1 suggestion is to fix the HTML so it does not have multiple objects with the same ID. Use a class name and you can then select them all with getElementsByClassName() or querySelectorAll() or with jQuery selectors as in:
$('.my_post_container')
If you insist on having multiple objects with the same id (a bad choice), then you will have to somewhat manually iterate over all possible objects that could have that id.
$("div[id='my_post_container']");
But, this is pretty darn inefficient because the browser can't use any of the built-in selector engine logic and it could break in the future if jQuery decides to optimize this. You really ought to switch to using class names.
You can not have multiple elements on the same page with the same id. Use a class instead, as shown here:
HTML:
<div class="my_post_container">...</div>
<div class="my_post_container">...</div>
<div class="my_post_container">...</div>
jQuery:
$('.my_post_container').mouseleave(function(e)
{
hideSnippet();
});
First of all there should not be any div elements with same ID name.. first we should solve that by keeping class name same.
then on mouse leave and enter part..
$(".testClass").on({
mouseenter : function() {
$(this).css({"background-color" : "blue"});
},
mouseleave : function() {
$(this).css({"background-color" : "green"});
}
});
this should work.. will add a js sample http://jsfiddle.net/meVc6/
and the same thing can be achived using css too..
just add css .testClass:hover { background-color:blue}

JQuery expands all divs on page

One div works fine, however when using multiple divs they all get expanded simultaneously.
Here 1x
http://jsfiddle.net/uPzXh/1/
Here 2x
http://jsfiddle.net/uPzXh/
How about:
jQuery(document).ready(function() {
jQuery(".lol").hide();
jQuery(".lollink").click(function() {
jQuery(this).prev().slideToggle(500);
jQuery(this,".new").hide();
});
});
BTW div in a is not allowed according to the spec.
In the second example you have a div with the same class name twice. So this line of code:
jQuery(".lol").slideToggle(500);
is doing what you tell it to do .. open all elements with a class name of lol.
Changing the class of the second div to lol2 would fix this.
I think you need to use $(this) inside the click function rather than $('.lol')
demo
I think what you are looking for is to expand one div when one link is clicked (not expand both, one after the other). If that's right, you can do something like this:
jQuery(".lollink").click(function() {
jQuery(this).hide().parent().find(".lol").slideToggle(500);
});
This hides the clicked element, gets the parent element, finds the descendant of that element with class .lol and toggles the slide on that.
See an updated fiddle here.

Categories