Selecting parent class using JQuery

This is some HTML I have:

<label class="rlabel">First Name</label>    
<input class="rinput" type="text" placeholder="Fisrt Name" required />     
<label class="rlabel">Last Name</label>    
<input class="rinput" type="text" placeholder="Last Name" /> 

Here is the CSS:

.rlabel{opacity:0;  }

And now, some Jquery:

$('.rinput').focus(function(){
        $(this).parent('.rlabel').css({'opacity':'1'});
        })

My goal is to change the opacity to 1 of the parent class "rlabel" when focusing on this class "rinput" using jquery.

I've attempted the following:

$('.rinput').focus(function(){
        $(this).parents('.rlabel').css({'opacity':'1'});
        })

as well as:

$('.rinput').focus(function(){
        $(this).parent('.rlabel').css({'opacity':'1'});
        })

and also:

$('.rinput').focus(function(){
        $(this).closest('.rlabel').css({'opacity':'1'});
        })

and finally:

$('.rinput').focus(function(){
        $(this).parents().css({'opacity':'1'});
        })

Answer №1

Your pal here is using the .prev() method because the label is not a parent element of the input

$('.rinput').focus(function() {
  $(this).prev('.rlabel').css({
    'opacity': '1'
  });
})
.rlabel {
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="rlabel">First Name</label>
<input class="rinput" type="text" placeholder="Fisrt Name" required />
<label class="rlabel">Last Name</label>
<input class="rinput" type="text" placeholder="Last Name" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determine the amount of unused vertical space within a block of text

Having applied CSS to a span element: font-height = 120px; height = 120px; line-height = 120px; The text inside the span does not completely fill the height of 120px. Is there a method to determine the offset of the text from the top and bottom boundar ...

Modify the color of the text input by the user in an AJAX-enhanced text box

After successfully implementing an autocomplete textbox using AJAX Autocomplete, I decided to enhance the feature with some Fuzzy logic. Now, as the user enters 3 characters, my database returns a list of records that match those characters. The search re ...

No response text returned from the local Ajax request

Currently, I am facing a challenge while attempting to send an ajax call from the client to my server containing data related to an input parameter. The issue is that although I can view the data in my server's console, it does not display in the brow ...

Step-by-step guide on positioning mid and bottom text using Bootstrap grid system

After searching and trying various solutions, I am still unable to get the desired output. My goal is to use grids in Bootstrap to set the footer layout with the class "link-footer" positioned at the middle height of the div and the class "footer-copyright ...

Simple JavaScript numeric input field

Hey there, I'm a beginner learning JavaScript. I'm currently working on creating a program that adds numbers input through text fields. If you want to check out the HTML code, visit this link on JS Fiddle: http://jsfiddle.net/fCXMt/ My questio ...

What is the best way to use jQuery to update the color of an SVG shape?

Hello everyone! I'm excited to be a part of this community and looking forward to contributing in the future. But first, I could really use some assistance with what seems like a simple task! My focus has always been on web design, particularly HTML ...

Using Ajax and jQuery to Retrieve the Value of a Single Tag Instead of an Entire Page

Let's say I have a webpage named page.html: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Page</title> </head> <body> <h1>Hello World!!</h1> </body> </html> Now ...

Enhance your website's user experience with jQuery by implementing smooth scrolling alongside

I have a fixed header at the top of my page. When it scrolls, I want to ensure that it does not cover or hide any of my content, especially the top portion of the section. // This code enables smooth scrolling (source: css-tricks) $('a[href*="#"]:no ...

How can I dynamically remove an option from a select dropdown if it already exists in another option using jQuery?

In order to achieve the desired functionality, I need to dynamically adjust the select options based on user input. Additionally, I want the selection to update automatically upon a change event. var dynamicCount = 1; $('#add').click(function ...

Verifying user input with JQuery's $.post function

I have a question regarding asynchronous calls. My goal is to validate whether a given "code" is valid without refreshing the page. Here's the scenario in brief: I need to determine if a variable should be set to true or false based on the response ...

Updating select boxes using PHP, MySQL, jQuery, and AJAX

As the title suggests, I am facing issues updating select boxes and unable to find a solution. This is my HTML: <div class="col-sm-3"> <select class="form-control" id="answer9"> <option value="00">Select</option> ...

Attempting to send a String in a particular structure

I'm facing an issue with the format I'm trying to pass. The expected format should be like this: [{"blah.png"},{"blah2.png"}] However, instead of getting the desired format, I am receiving this: ["blah.png","blah2.png"] Below is the code snip ...

Is it possible to observe cross-domain Javascript requests in Firebug or any alternative browser extension?

Is there a way to monitor cross-domain JavaScript requests made on a webpage? Is it possible with Firebug or any other plugin? Consider this scenario: If I visit stackoverflow.com and they incorporate an external JavaScript file (such as Google Analytics) ...

The element residing within the body exceeds the body's dimensions

HTML : <body> <header> <div> </div> </header> </body> CSS : body { width : 1000px ; } header { width : 100% ; } If these codes are implemented, The header's width should be the same as the body's ...

Execute an ajax function when a form is submitted on Marketo

My Request I am seeking assistance with integrating a Marketo script in a WordPress plugin. Upon submission of the Marketo form, I need to perform calculations using the form elements and display the results on the page. Please provide suggestions on ho ...

Issue with Jquery event not triggering correctly following ajax data retrieval

This script uses jQuery and Ajax to populate a navigation bar with categories and subcategories dynamically. The first unordered list is static, while the second one is populated after receiving data via Ajax. There are some jQuery events that need to be i ...

Invoking partial view via Ajax

I am using Ajax to call a partial view, but it is returning as undefined. This is my controller code: [HttpGet] public ActionResult CallPartial() { if (Request.IsAjaxRequest()) { return PartialView("~/Views/Partial1"); ...

Automatically close Bootstrap 4 modal popups

I am using Bootstrap 4 and trying to make my modal automatically close after 3 seconds. I attempted a solution but it seems to not be functioning correctly. The modal itself works fine, but the auto-closing feature is not working as expected. Below is the ...

Jquery Issue: Safari Leaves Alert Messages Unclosed When Opening Next Alert

I am experiencing an issue in Safari Browser and need some help with the following scenarios (with Example). When I click a button to delete an account, an alert message pops up. This alert window has two actions - "OK" and "Cancel". If I click "OK", it r ...

How to align text vertically in a cell alongside a button in another cell using Bootstrap

In my table, I have 3 columns of text and a fourth column with a button. The alignment of the text in the cells does not match the button text vertically due to the button having a vertical-align value of 'middle'. To align them properly, I curre ...