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>

当我使用此代码时，它将影响整个身体ul li标签。请给我解决方案。谢谢

Answer 1

已更新：需要访问父级，然后使用closest()。请查看下面的snnippet

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你在正确的道路上，你应该只在.parents()电话中指定父母：

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

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

一些事情：
要获得您想要的内容，您可以使用$('...').parents()[1].css({'...'});
.parents()方法返回所有父项的数组，数组的第一个元素是直接父项此外，由于您拥有要选择的元素的ID，因此您不必在其之前使用li。请参阅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/

如何使用jquery获取父元素

4 个答案: