[英]Using javascript to access li elements within ul
我正在嘗試構建一個程序,一旦頁面加載它自動添加一個大小。 我在ul中有一堆li標簽,我想知道如何使用JQuery訪問這些li標簽。
我通常會使用Document.getByName,但ul沒有id。
這是完整的代碼:
<div class="exp-pdp-size-dropdown-container selectBox-options exp-pdp-size-dropdown exp-pdp-dropdown selectBox-dropdown-menu" style="display: block; top: 38px; left: 0px;">
<a class="selectBox exp-pdp-size-dropdown exp-pdp-dropdown selectBox-dropdown selectBox-menuShowing" style="display: inline-block;" title="" tabindex="0"><label class="exp-pdp-dropdown-label platform-font-1">SIZE</label><span class="selectBox-label"> </span><span class="selectBox-arrow glyph-replace" data-glyph="j"></span></a>
<ul class="selectBox-options exp-pdp-size-dropdown exp-pdp-dropdown" style=""><li class="exp-pdp-size-not-in-stock selectBox-selected" style=""><a rel=""></a></li><li class="exp-pdp-size-not-in-stock first-in-row upper-left"><a rel="3488377:6">
6
</a></li><li class="exp-pdp-size-not-in-stock"><a rel="3488378:6.5">
6.5
</a></li><li class="last-in-row upper-right"><a rel="3488379:7">
7
</a></li><li class="first-in-row"><a rel="3488380:7.5">
7.5
</a></li><li class=""><a rel="3488381:8">
8
</a></li><li class="last-in-row"><a rel="3488382:8.5">
8.5
</a></li><li class="first-in-row"><a rel="3488383:9">
9
</a></li><li class="exp-pdp-size-not-in-stock"><a rel="3488384:9.5">
9.5
</a></li><li class="last-in-row"><a rel="3488385:10">
10
</a></li><li class="first-in-row"><a rel="3488386:10.5">
10.5
</a></li><li class=""><a rel="3488387:11">
11
</a></li><li class="last-in-row"><a rel="3488388:11.5">
11.5
</a></li><li class="first-in-row"><a rel="3488389:12">
12
</a></li><li class="exp-pdp-size-not-in-stock"><a rel="3488390:12.5">
12.5
</a></li><li class="last-in-row"><a rel="3488391:13">
13
</a></li><li class="first-in-row lower-left"><a rel="3488392:14">
14
</a></li><li class="exp-pdp-size-not-in-stock last-in-row lower-right"><a rel="3488393:15">
15
</a></li></ul></div>
您可以使用.prepend()或.append()
$('ul.selectBox-options').prepend('<li>Hello World</li>');
$('ul.selectBox-options').append('<li>Good bye World</li>');
有很多方法可以在<ul>
選擇<li>
,這里有幾個:
$("ul.selectBox-options li:contains('8.5')").css('background', 'purple'); $('ul.selectBox-options li').first().css('background', 'yellow'); $('ul.selectBox-options li').last().css('background', 'orange'); $('ul.selectBox-options li:nth-child(2)').css('background','red');
首先,為您的<ul>
標記指定一個id
,如下所示:
<ul id="myList" class="selectBox-options exp-pdp-size-dropdown exp-pdp-dropdown" style="">
然后,使用此jQuery代碼循環遍歷<li>
標記:
<script type="text/javascript">
$(function() {
var listItems = $("#myList li");
listItems.each(function(i, li) {
var listItem = $(li);
// some code
});
});
</script>
或者,如果您不想為<ul>
標記賦予id
,您可以像這樣使用它的class
:
var listItems = $('ul.selectBox-options li');
你可以使用appendChild:
JAVASCRIPT :
var ul = document.getElementById("test");
var addLi = document.createElement("li");
ul.appendChild(addLi);
addLi.innerHTML = "Second li";
演示: http : //jsfiddle.net/QzYm4/2/
Node.appendChild: https : //developer.mozilla.org/en-US/docs/Web/API/Node.appendChild
我用來獲取ul標簽的選擇器是你的代碼中的第一個類值,如果你只想將這個選擇器應用於一個ul標簽,你必須在ul標簽上添加一個id attr,然后像這// $('#yourID li')。size();
$(document).ready( function(){
var count_Li = $('.selectBox-options li').size();
alert(count_Li);
$('.selectBox-options li').each( function(){
alert($(this).text());
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.