當元素處於同級時,比如以下這種調用,點擊對應的li標籤,li標籤同級對應的div標籤纔會顯示
html代碼:
<ul id="open_list">
<li class="product_Level" data-fid="1">
<a>雲服務器</a>
</li>
<div data-id="1" class="list_nome open_list_item">
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=1&gid=1">西南-綿陽電信</a>
</div>
</li>
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=1&gid=2">西南-西雲高防&BGP</a>
</div>
</li>
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=1&gid=3">香港-精品CN2</a>
</div>
</li>
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=1&gid=8">美國-CN2直連高防</a>
</div>
</li>
</div>
<li class="product_Level active " id="open" data-fid="2">
<a>物理機</a>
</li>
<div data-id="2" class="list_nome1 open_list_item">
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=2&gid=4">韓國CN2</a>
</div>
</li>
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=2&gid=5">棗莊高防&amp;雙線</a>
</div>
</li>
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=2&gid=6">棗莊高防&三線</a>
</div>
</li>
<li class="products-secondary">
<div class="product_second active ">
<a class="text-white" href="/cart?fid=2&gid=9">香港CN2直連活動機</a>
</div>
</li>
</div>
</ul>這時候用jquery來實現點擊展示或者消失的效果,就需要用到選擇器了。
jquery:
$('#open_list .open_list_item[data-id='+ $(this).attr('data-fid') +']')
這裏放一個,點擊li,然後li同級的div可以輕鬆選擇到。
| [attribute] | $("[href]") | 所有帶有 href 屬性的元素 |
| [attribute=value] | $("[href='#']") | 所有 href 屬性的值等於 "#" 的元素 |
| [attribute!=value] | $("[href!='#']") | 所有 href 屬性的值不等於 "#" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有 href 屬性的值包含以 ".jpg" 結尾的元素 |