红穆笔记
首頁 語言筆記 jquery 選擇器
語言筆記 JavaScript

jquery 選擇器

jquery 选择器

當元素處於同級時,比如以下這種調用,點擊對應的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">西南-西雲高防&amp;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;amp;雙線</a>
			</div>
		</li>
		<li class="products-secondary">
			<div class="product_second  ">
				<a class="text-white" href="/cart?fid=2&gid=6">棗莊高防&amp;三線</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" 結尾的元素
微信赞赏

微信

支付宝赞赏

支付寶

✍️ 作者: 紅穆

網站管理員 · 感謝閱讀,更多精彩內容敬請關注

作者主頁 查看主頁 →

相關文章

js 鼠标移上去修改style属性

js 鼠標移上去修改style屬性 語言筆記 JavaScript

演示效果鼠標移上去,顏色顯示爲紅色,鼠標移開,顏色顯示爲黑色。獲取id對象:document.getElementById()鼠標移上去:onmouseover鼠標移開:onmouseout&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; …
👁 130

推薦閱讀

小程序模板资源下载网站模板28279 0548

小程序模板資源下載網站模板28279 0548 實用收藏 易優模板

一款針對小程序模板資源下載的eyoucms網站模板。設計風格資源下載,能夠展示小程序模板、資源分類、下載服務及用戶評價。有助於模板資源平臺在線上吸引開發者用戶。模板展示 安裝說明 網站後臺:/login.php 賬號:admin 密碼:admin 相關文章易優CMS安裝常見問題總結易優CMS(Eyo…
👁 33
(PC+WAP)绿色化工材料企业网站pbootcms模板 营销型化工环保能源网站源码下载 0542

(PC+WAP)綠色化工材料企業網站pbootcms模板 營銷型化工環保能源網站源碼下載 0542 實用收藏 pbootcms模板

一款針對化工材料與環保能源行業的PbootCMS營銷型企業網站模板,採用綠色風格,支持PC和手機端。設計風格強調環保與科技,適合展示化工產品、能源解決方案及企業社會責任。有助於化工企業在線上樹立綠色品牌形象並吸引客戶。模板展示 安裝說明 網站後臺:/admin.php 賬號:admin 密碼:adm…
👁 33
wordpress get_post_meta函数

wordpress get_post_meta函數 程序筆記 wordpress

get_post_meta() 是 WordPress 中一個用於獲取文章/頁面自定義字段的函數,也稱爲“元數據”。它的函數原型如下:get_post_meta( int $post_id, string $key = '', bool $single = false )參數說明:$post_id:…
👁 310
工业户外器材商城模板 0549

工業戶外器材商城模板 0549 實用收藏 易優模板

此套eyoucms商城模板適用於工業與戶外器材行業,設計風格專業戶外,能夠展示工業器材、戶外用品、品牌故事及在線購買。有助於工業戶外品牌在線上搭建電商平臺,吸引專業客戶。模板展示 安裝說明 網站後臺:/login.php 賬號:admin 密碼:admin 相關文章易優CMS安裝常見問題總結易優CM…
👁 44
(自适应移动端)简单的大型农业机械设备类网站pbootcms模板 水稻玉米收割机网站源码下载 0543

(自適應移動端)簡單的大型農業機械設備類網站pbootcms模板 水稻玉米收割機網站源碼下載 0543 實用收藏 pbootcms模板

一款簡單實用的大型農業機械設備與水稻玉米收割機PbootCMS網站模板,支持移動端訪問。設計風格務實專業,適合展示大型農具及田間作業案例。有助於農業機械企業在線上展示產品,吸引大型農場與農業合作社。模板展示 安裝說明 網站後臺:/admin.php 賬號:admin 密碼:admin 解壓密碼:ww…
👁 44
wordpress  update_post_meta函数

wordpress update_post_meta函數 程序筆記 wordpress

update_post_meta() 是 WordPress 中一個用於更新文章/頁面自定義字段的函數,也稱爲“元數據”。它的函數原型如下:update_post_meta( int $post_id, string $meta_key, mixed $meta_value, mixed $prev…
👁 198