$(this).closest not working when added to script


$(this).closest not working when added to script



Hello I have a very basic script that moves the child <img> inside its <label> parent when you hover on and off the <label> element.


<img>


<label>


<label>



The issue is if you hover over one label. ALL images under ALL labels move.. This i do not want. I tried to solve this by adding $(this).closest to my function. But when $(this).closest code is added it breaks. If you remove (this).closest from my code it works fine but its affecting all of them instead of the single one being hovered over.


$(this).closest


$(this).closest



HTML









</div>



jQuery


$(".checkbox-cover.images-true>div>label").hover(
function () {
$(this).closest('img').stop().animate({top: '-200px'});
}, function (){
$(this).closest('img').stop().animate({top: '0'});
});





closest searches the DOM tree going UP, not DOWN, what you really want is $(this).find('> img') instead.
– Matteo Tassinari
Jul 2 at 13:28



closest


$(this).find('> img')





So how do i make the script work by only affecting the current hovered element not all with that class?
– KYSSE
Jul 2 at 13:29





Replace closest with find!
– eisbehr
Jul 2 at 13:29


closest


find





I assumed "this" was refering to the <label> ??
– KYSSE
Jul 2 at 13:29





This is once again a prime example of making stuff harder on yourself than it had to be, by using JS to implement something that can be done in CSS already …
– CBroe
Jul 2 at 13:30





2 Answers
2



closest searches the DOM tree going up (ancestors), not down (descendants), what you really want is find instead.


closest


find


$(".checkbox-cover.images-true > div > label").hover(
function () {
$(this).find('> img').stop().animate({top: '-200px'});
}, function () {
$(this).find('> img').stop().animate({top: '0'})
});
});



Lastly, as the comments suggest, you can shorten $(this).find('> img') with $('img', this), setting the "context" parameter.


$(this).find('> img')


$('img', this)





Or even simpler $('img', $(this))
– marekful
Jul 2 at 13:30


$('img', $(this))





Or even better $('img', this) ;)
– eisbehr
Jul 2 at 13:30



$('img', this)





Thanks for your suggestions, I updated my answer!
– Matteo Tassinari
Jul 2 at 13:36



Since img is a child of label here and closest is used to get the closest parent that matches the selector. Try this instead:


img


label


closest


$(".checkbox-cover.images-true>div>label").hover(
function() {
$('img', this).stop().animate({top: '-200px'});
},
function() {
$('img', this).stop().animate({top: '0'});
}
);



Also, you can achieve this with CSS only like:




.images-true label img {
position: relative;
transition: all 1s ease 0s;
top: 0;
}

.images-true label:hover img {
top: -200px;
}







</div>



Just wanted to let you know about it and keep all your options open.






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

PHP contact form sending but not receiving emails

PHP contact form sending but not receiving emails I have created a contact form using PHP to send the data. The form seems to send fine as there are no errors and success message appears, however I am not receving the emails into the designated inbox. I am using PHPMailer as I originally tried just using the php 'mail' command which I now understand is a bit hit and miss. I cannot see why I would not be receving the emails so I would be very grateful for any help that could be given. I'm quite new to PHP so please be patient with me :) <?php use PHPMailerPHPMailerPHPMailer; use PHPMailerPHPMailerException; $msg = ""; if (isset($_POST['submit'])) { require 'phpmailer/src/Exception.php'; require 'phpmailer/src/PHPMailer.php'; require 'phpmailer/src/SMTP.php'; function sendemail ($to, $from, $body) { $mail = new PHPMailer(true); $mail->setFrom($from); $mail->addAddress($to); $ma...
Read more

PHP parse/syntax errors; and how to solve them?

Image
PHP parse/syntax errors; and how to solve them? Everyone runs into syntax errors. Even experienced programmers make typos. For newcomers it's just part of the learning process. However, it's often easy to interpret error messages such as: PHP Parse error: syntax error, unexpected '{' in index.php on line 20 The unexpected symbol isn't always the real culprit. But the line number gives a rough idea where to start looking. Always look at the code context . The syntax mistake often hides in the mentioned or in previous code lines . Compare your code against syntax examples from the manual. While not every case matches the other. Yet there are some general steps to solve syntax mistakes . This references summarized the common pitfalls: Unexpected T_STRING Unexpected T_VARIABLE Unexpected '$varname' (T_VARIABLE) Unexpected T_CONSTANT_ENCAPSED_STRING Unexpected T_ENCAPSED_AND_WHITESPACE Unexpected $end Unexpected T_FUNCTION… Unexpected { { Unexpected } } Unexpe...
Read more

iOS Top Alignment constraint based on screen (superview) height

Image
iOS Top Alignment constraint based on screen (superview) height Let's say for example i want my view's top margin be 30 px for iPhone 6s and for the other screen i want to change this constants from 30 to X where X is proportional to total height of screen i.e. 36.5 for iPhone X, 33 for iPhone 6s plus, 25 for iPhone SE And so on .... I know i can take @IBOutlet of NSLayoutConstraint and change it programmatically but what i want is i want to set it like aspect ratio that we have for height width like subview's heigh width is proportional it's superview it changes with super view's height and width @IBOutlet NSLayoutConstraint 2 Answers 2 The constraint you need here is the superView's centerY set multiplier to 0.5 if you want the top anchor's constant to be 0.25 of screen height from the top , so adjust the multiplier according to this logic which is height_of_scre...
Read more