How to get parent element using jquery

Question

I want increase the font size of parent element. When i use my code it will increase full body font size how can i avoid that issue? Example based on the id="vs-1" i want increase the font size of the grant parent li text here 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>

When i use this code it will affect entire body ul li tag . Please give me the solution. Thanks

`.parent()` is what you're after. Also you have an ID (which should be unique in the DOM btw) so you don't need `li #vs-1` just do `$('#vs-1').parent()` — Andy Holmes, Feb 03 '17 at 14:56
Did you try typing your exact title into Google? - your answer is literally the first and second result :) — Darren Wainwright, Feb 03 '17 at 14:57

Bhushan Kawadkar · Answer 1 · 2017-02-03T15:15:37.263

2

Updated: need to reach parent and then use closest(). Please check below snnippet

$(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>

edited Feb 03 '17 at 15:15

answered Feb 03 '17 at 14:58

Bhushan Kawadkar

28,279
5
35
57

do you get any error message in your console when trying this answer – Yannick Huber Feb 03 '17 at 15:02
**4 upvotes fot a non-working answer !!** Sorry but the `closest()` will not work in this situation.. Take a look to **[closest() method not working as expected](http://stackoverflow.com/questions/41508008/closest-method-not-working-as-expected)**. – Zakaria Acharki Feb 03 '17 at 15:10
@Rijo, yes it was not working .. I have corrected my answer , please check – Bhushan Kawadkar Feb 03 '17 at 15:16

score 2 · Accepted Answer · edited Feb 03 '17 at 15:57

2

You were on the right path you should just to specify the parent in .parents() call :

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

Hope this helps.

$("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>

edited Feb 03 '17 at 15:57

hungerstar

21,206
6
50
59

answered Feb 03 '17 at 15:01

Zakaria Acharki

66,747
15
75
101

after 2 minutes needed – Rijo Feb 03 '17 at 15:08

score 1 · Answer 3 · answered Feb 03 '17 at 15:03

1

A few things:
To achive what you want, you can use $('...').parents()[1].css({'...'});
the .parents() method returns an array of all parents, and the first element of the array is the immediate parent.
Also, since you have an id of the element you want to select, you don't have to have li before it.
See the docs

answered Feb 03 '17 at 15:03

Legit Dongo

66
5

ya bro your answer correct only. Can u give me vote for my question – Rijo Feb 03 '17 at 15:12

mudin · Answer 4 · 2017-02-03T15:13:51.070

1

You only want style parent li, not that li itself. Try this:

$("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/

edited Feb 03 '17 at 15:13

answered Feb 03 '17 at 15:10

mudin

2,672
2
17
45

ya its working thanks for your work. So my question is valid can u give me vote for my question – Rijo Feb 03 '17 at 15:18

How to get parent element using jquery

4 Answers4