Как получить родительский элемент с помощью jquery

Question

Я хочу увеличить размер шрифта родительского элемента. Когда я использую свой код, он увеличит размер шрифта всего тела, как я могу избежать этой проблемы? Пример, основанный на id="vs-1". Мне нужно увеличить размер шрифта текста родительского лидера гранта здесь 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>

Когда я использую этот код будет влиять на весь организм уль Li тег. Пожалуйста, дайте мне решение. Спасибо

Answer 1

Вы были на правильном пути, вы должны просто указать родитель в .parents() вызова:

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

Надеется, что это помогает.

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

Обновлено: необходимо связаться с родителем, а затем использовать closest(). Пожалуйста, проверьте ниже 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>

Answer 3

несколько вещей:
для того чтобы достигнуть того, что вы хотите, вы можете использовать $('...').parents()[1].css({'...'});
метод .parents() возвращает массив всех родителей, а первый элемент массива является непосредственный родитель.
Кроме того, поскольку у вас есть идентификатор элемента, который вы хотите выбрать, вам не нужно иметь ли он перед ним.
См docs

Answer 4

Вы хотите только стиль родительского li, не то, что само по себе li. Попробуйте это:

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