Question

我正在处理一个动态输出的无序列表，并且已经填充了“data-value”的数据属性。我无法控制后端输出的内容。我需要隐藏一些列表元素并更改其中一个元素的数据属性。所以，作为一个例子，我有以下html（不是实际的数据！）：

<ul class="dropdown-menu">
    <li data-value="1996"><a href="javascript:;">1996</a></li>
    <li data-value="1997"><a href="javascript:;">1997</a></li>
    <li data-value="1998"><a href="javascript:;">1998</a></li>
    <li data-value="1999"><a href="javascript:;">1999</a></li>
    <li data-value=""><a href="javascript:;">2000</a></li>
<ul>

然后我得到了以下jquery：

window.onload = function(){
    $('.dropdown-menu li[data-value="1996"]').html('YYYY');
    $('.dropdown-menu li[data-value="1996"]').attr('data-value', 'YYYY');
    $('.dropdown-menu li[data-value=""]').addClass('hideMe');
}

这个代码字和我想要它做的但是看起来非常混乱和冗长的啰嗦。还有更好的方法吗？

Answer 1

根据建议，您可以链接前两行并将其换行为两行：

$(document).ready(function(){
    $('.dropdown-menu li[data-value="1996"]').html('YYYY').attr('data-value', 'YYYY');
    $('.dropdown-menu li[data-value=""]').addClass('hideMe');
});

.hideMe{
  display:none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu">
    <li data-value="1996"><a href="javascript:;">1996</a></li>
    <li data-value="1997"><a href="javascript:;">1997</a></li>
    <li data-value="1998"><a href="javascript:;">1998</a></li>
    <li data-value="1999"><a href="javascript:;">1999</a></li>
    <li data-value=""><a href="javascript:;">2000</a></li>
<ul>

隐藏和替换html内容和数据属性值

1 个答案: