"Uncovering the parent element with jQuery: A step-by-step guide

Question

"Uncovering the parent element with jQuery: A step-by-step guide

I need help increasing the font size of a parent element without affecting the entire body's font size. How can I achieve this? For example, with the id="vs-1", I want to increase the font size of the grandparent li text here which is "1940".

$("li #vs-1").parents().css({
  'color': '#ff3600',
  'font-size': '35px'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>1940
<ul>
<li style="background-color: rgb(255, 54, 0);" id="vs-1"></li>
</ul>
</li>
<li>1970
<ul>
<li id="vs-2"></li>
</ul>
</li>
</ul>

However, when using this code, it affects the entire body ul li tag. Can someone provide me with a solution for this issue? Thank you.

javascript jquery css

Answer 1

Answer №1

It seems like you were on the right track, but just remember to specify the parent in your .parents() call:

$('li #vs-1').parents("li").css({'color':'#ff3600','font-size':'35px'});
______________________^^^^

I hope this explanation helps clarify things for you.

$("li #vs-1").parents('li').css({
  'color': '#ff3600',
  'font-size': '35px'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1940
    <ul>
      <li style="background-color: rgb(255, 54, 0);" id="vs-1"></li>
    </ul>
  </li>
  <li>1970
    <ul>
      <li id="vs-2"></li>
    </ul>
  </li>
</ul>

Answer 2

It seems like you were on the right track, but just remember to specify the parent in your .parents() call:

$('li #vs-1').parents("li").css({'color':'#ff3600','font-size':'35px'});
______________________^^^^

I hope this explanation helps clarify things for you.

$("li #vs-1").parents('li').css({
  'color': '#ff3600',
  'font-size': '35px'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1940
    <ul>
      <li style="background-color: rgb(255, 54, 0);" id="vs-1"></li>
    </ul>
  </li>
  <li>1970
    <ul>
      <li id="vs-2"></li>
    </ul>
  </li>
</ul>

Answer 3

Answer №2

Updated: in order to target the parent and then utilize closest() method. Kindly refer to the snippet below

$(function(){
  $("li #vs-1").parent().closest("li").css({'color':'#ff3600','font-size':'35px'});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1940
    <ul>
      <li style="background-color: rgb(255, 54, 0);" id="vs-1"></li>
    </ul>
  </li>
  <li>1970
    <ul>
      <li id="vs-2"></li>
    </ul>
  </li>
</ul>

Answer 4

Updated: in order to target the parent and then utilize closest() method. Kindly refer to the snippet below

$(function(){
  $("li #vs-1").parent().closest("li").css({'color':'#ff3600','font-size':'35px'});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1940
    <ul>
      <li style="background-color: rgb(255, 54, 0);" id="vs-1"></li>
    </ul>
  </li>
  <li>1970
    <ul>
      <li id="vs-2"></li>
    </ul>
  </li>
</ul>

Answer 5

Answer №3

Here are a couple of tips:
For the desired outcome, you can achieve it by using the code snippet

$('...').parents()[1].css({'...'});

The .parents() function returns an array containing all parent elements, with the first element being the immediate parent.
Additionally, because you already have the id of the element you want to target, there is no need to include li before it.
Refer to the documentation for more details.

Answer 6

Here are a couple of tips:
For the desired outcome, you can achieve it by using the code snippet

$('...').parents()[1].css({'...'});

The .parents() function returns an array containing all parent elements, with the first element being the immediate parent.
Additionally, because you already have the id of the element you want to target, there is no need to include li before it.
Refer to the documentation for more details.

Answer 7

Answer №4

To achieve the desired style for the parent li, you can target it specifically without affecting the li itself. Here's a suggested approach:

$("li #vs-1").parent('li').css({
  'color': '#ff3600',
  'font-size': '35px'
});

$("li #vs-1").closest('li').css({
  'color': '#000',
  'font-size': '16px'
});

https://jsfiddle.net/9u9hb839/2/

Answer 8

To achieve the desired style for the parent li, you can target it specifically without affecting the li itself. Here's a suggested approach:

$("li #vs-1").parent('li').css({
  'color': '#ff3600',
  'font-size': '35px'
});

$("li #vs-1").closest('li').css({
  'color': '#000',
  'font-size': '16px'
});

https://jsfiddle.net/9u9hb839/2/

"Uncovering the parent element with jQuery: A step-by-step guide

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Isolating a type as a constant in Typescript within a .js file?

Creating a customized image modal in ReactJS that incorporates a dynamic slideshow feature using the

Express and Webpack Error: "SyntaxError: Unexpected token <"

React form input values fail to refresh upon submission

Sending NodeJS Buffer as form data to Spring Boot in a correct way

Interactive Audio Progress Bar in HTML5

Having trouble aligning a div in the middle of a slick-slider item using flex styling

Sort through each individual column in the table

Using Node.js to send a photo through a Telegram Bot

The ng-message function appears to be malfunctioning

Does the color of the item change as it gets older?

Guide to creating a toggle button

What steps can I take to ensure that I establish the definition of this variable?

When trying to use bootstrap modal buttons, they do not trigger with just a single click when

When using ElementUI, the translation of &nbsp to a space in el-select is not supported

Steps to Incorporate jQuery Function in a Partial View Inside a Modal

a hyperlink not functioning properly after the # symbol

Styling code for a layout with two columns aligned to the left using

"Discover the power of Algolia's docSearch feature

JavaScript failed to execute