但这不是如何使用ID

Question

我在javascript中通过id传递一个值，如果它获取了id，它必须隐藏li但问题是它只隐藏第一个li仍然显示li

＆＃13;

$(function() {
  $("#0").hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="0" class="treeview">
  <a href="#">
    <i class="fa fa-files-o"></i>
    <span>Header Options<i class="fa fa-angle-left pull-right"></i></span>
  </a>
  <ul class="treeview-menu">
    <li><a href="addlogo.php"><i class="fa fa-circle-o"></i>Add logo</a></li>
    <li><a href="addmenu.php"><i class="fa fa-circle-o"></i>Add Main Menu</a></li>
    <li><a href="addslider.php"><i class="fa fa-circle-o"></i>Add slider img</a></li>

  </ul>
</li>
<li id="0" class="treeview">
  <a href="#">
    <i class="fa fa-files-o"></i>
    <span>Home Content<i class="fa fa-angle-left pull-right"></i></span>
  </a>
  <ul class="treeview-menu">
    <li><a href="home_content.php"><i class="fa fa-circle-o"></i>Add 
                   Content</a></li>



  </ul>
</li>

＆＃13;

Answer 1

每个元素的ID都是唯一的。尝试使用类何时隐藏多个html元素。您的代码将如下所示， HTML ：

<li class="treeview 0">
              <a href="#">
                <i class="fa fa-files-o"></i>
                <span>Header Options<i class="fa fa-angle-left pull-right"></i></span>
              </a>
              <ul class="treeview-menu">
                <li><a href="addlogo.php"><i class="fa fa-circle-o"></i>Add logo</a></li>
                <li><a href="addmenu.php"><i class="fa fa-circle-o"></i>Add Main Menu</a></li>
                <li><a href="addslider.php"><i class="fa fa-circle-o"></i>Add slider img</a></li>

                </ul>
            </li>   
            <li class="treeview 0">
              <a href="#">
                <i class="fa fa-files-o"></i>
                <span>Home Content<i class="fa fa-angle-left pull-right"></i></span>
              </a>
              <ul class="treeview-menu">
                <li><a href="home_content.php"><i class="fa fa-circle-o"></i>Add 
               Content</a></li>



                </ul>
            </li>

JS ：

$(function() {
  $(".0").hide();
});

Answer 2

然后试试。

$(function() {
  $("li").each(function(index, item) {
    var li = $(item);
    if(li.attr('id') == "0")
      li.hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="0" class="treeview">
  <a href="#">
    <i class="fa fa-files-o"></i>
    <span>Header Options<i class="fa fa-angle-left pull-right"></i></span>
  </a>
  <ul class="treeview-menu">
    <li><a href="addlogo.php"><i class="fa fa-circle-o"></i>Add logo</a></li>
    <li><a href="addmenu.php"><i class="fa fa-circle-o"></i>Add Main Menu</a></li>
    <li><a href="addslider.php"><i class="fa fa-circle-o"></i>Add slider img</a></li>

  </ul>
</li>
<li id="0" class="treeview">
  <a href="#">
    <i class="fa fa-files-o"></i>
    <span>Home Content<i class="fa fa-angle-left pull-right"></i></span>
  </a>
  <ul class="treeview-menu">
    <li><a href="home_content.php"><i class="fa fa-circle-o"></i>Add 
                   Content</a></li>



  </ul>
</li>

但这不是如何使用ID

更好的想法是使用data属性。例如：

$(function() {
  $("li[data-id='0']").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li data-id="0" class="treeview">
  <a href="#">
    <i class="fa fa-files-o"></i>
    <span>Header Options<i class="fa fa-angle-left pull-right"></i></span>
  </a>
  <ul class="treeview-menu">
    <li><a href="addlogo.php"><i class="fa fa-circle-o"></i>Add logo</a></li>
    <li><a href="addmenu.php"><i class="fa fa-circle-o"></i>Add Main Menu</a></li>
    <li><a href="addslider.php"><i class="fa fa-circle-o"></i>Add slider img</a></li>

  </ul>
</li>
<li data-id="0" class="treeview">
  <a href="#">
    <i class="fa fa-files-o"></i>
    <span>Home Content<i class="fa fa-angle-left pull-right"></i></span>
  </a>
  <ul class="treeview-menu">
    <li><a href="home_content.php"><i class="fa fa-circle-o"></i>Add 
                   Content</a></li>



  </ul>
</li>

Answer 3

您不应该使用具有相同值的id属性多次。相反，您可以使用class属性。

错误代码：

<div id="my-div">Hello, World A</div>
<div id="my-div">Hello, World B</div>

好代码：

<div class="my-div">Hello, World A</div>
<div class="my-div">Hello, World B</div>

另外：使用数字启动id或class值并不好。

然后针对您的情况

＆＃13;

$('.my-div').hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-div">Hello, World A</div>
<div class="my-div">Hello, World B</div>

＆＃13;

Answer 4

使用您需要隐藏的所有元素共有的类，如下所示：

function hideLi() {
  $(".treeview").hide();
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="0" class="treeview">
  <a href="#">
    <i class="fa fa-files-o"></i>
    <span>Header Options<i class="fa fa-angle-left pull-right"></i></span>
  </a>
  <ul class="treeview-menu">
    <li><a href="addlogo.php"><i class="fa fa-circle-o"></i>Add logo</a></li>
    <li><a href="addmenu.php"><i class="fa fa-circle-o"></i>Add Main Menu</a></li>
    <li><a href="addslider.php"><i class="fa fa-circle-o"></i>Add slider img</a></li>

  </ul>
</li>
<li id="0" class="treeview">
  <a href="#">
    <i class="fa fa-files-o"></i>
    <span>Home Content<i class="fa fa-angle-left pull-right"></i></span>
  </a>
  <ul class="treeview-menu">
    <li><a href="home_content.php"><i class="fa fa-circle-o"></i>Add 
                   Content</a></li>



  </ul>
</li>
<button onMouseUp="hideLi()">Hide</button>

Answer 5

正如其他人所说，不要使用重复的ID！

但是，如果没有其他方法，请获取所有LI元素，然后使用#0过滤那些元素并隐藏它们：

$(function() {
  $("li").filter("#0").hide();
});

https://jsfiddle.net/L5eyg5fp/

$("li").attr("id","0").hide();也可以。或者在这种情况下可以使用包含当前元素的DOM traversal method - 例如closest() - （只需确保您知道此类方法的作用）。

通过传递id值隐藏所有div

5 个答案:

但这不是如何使用ID