jquery - ASP.Net 中使用 JQuery 进行 DOM 导航

Question

我在下面编写了 JQuery，并且必须使用多次调用 .parent() 来搜索 DOM 中的项目，因为 ASP.Net 中呈现的 ClientID 是在 html 中动态构建的。我知道每次更改标记代码时这都会导致问题，并且想看看是否有人知道在 ASP.Net 中执行此操作的更好方法。

<script language="jquery" src="js/jquery-1.3.2-vsdoc2.js" type="text/javascript">
</script>
<script src="js/jquery.color.js" type="text/javascript">
</script>
script language="javascript" type="text/javascript">
    $(document).ready(function() {

    //Get the cost of the base item, then add the cost of the selected compoents as 
    //they get selected.    
    $(".AspNet-CheckBoxList > ul > li > input").click(function() {

        var itemCost = 0;

        $(this).find("fieldset:div:span");

        itemCost =  GetItemCost($(this).parent().parent().parent().parent()
        .parent().parent().parent().children().find("span").text());
        var Component = $(this).next("label").text();

        if ($(this).attr("checked") == true) {
            itemCost = (itemCost + GetItemCost(Component)).toFixed(2);               
        }
        else {
            itemCost = (itemCost - GetItemCost(Component)).toFixed(2);
        }

        $(this).parent().parent().parent().parent().parent()
        .parent().parent().children().find("span").text("$" + itemCost);
        $(this).parent().parent().parent().parent().parent()
        .parent().parent().children().find("span").animate( 
        { backgroundColor: "#FFFF66" }, 300)
         .animate({ backgroundColor: 'white' }, 750);
      });

   });

function GetItemCost(text) {
    var start = 0;
    start = text.lastIndexOf("$");

    var itemCost = text.substring(start + 1);       

    var pattern = /,/g;
    itemCost = itemCost.replace(pattern, "");       

    return Number(itemCost);
}
</script>

这是从渲染页面源复制的一些 html

<fieldset id="ctl00_ContentPlaceHolder1_ctl00_FieldSet" class="parent">
<legend>
</legend>
<a id="ctl00_ContentPlaceHolder1_ctl00_ImgLink" class="imgcontainer">
</a>
<div>
<input id="ctl00_ContentPlaceHolder1_ctl00_RemoveCartItem" type="image" 
    alt="Remove Item" src="img/buttons/remove_4c.gif" 
    name="ctl00$ContentPlaceHolder1$ctl00$RemoveCartItem"/>
<span id="ctl00_ContentPlaceHolder1_ctl00_TotalItemCost">$315.96</span>
</div>
<ol id="ctl00_ContentPlaceHolder1_ctl00_InputList">
<li class="pt">
<label id="ctl00_ContentPlaceHolder1_ctl00_ProjectLabel"   
for="ctl00_ContentPlaceHolder1_ctl00_ProjectValue">Project</label>
<input id="ctl00_ContentPlaceHolder1_ctl00_ProjectValue" type="text"  
name="ctl00$ContentPlaceHolder1$ctl00$ProjectValue"/>
</li>
<li class="pt">
<label id="ctl00_ContentPlaceHolder1_ctl00_TaskLabel"    
for="ctl00_ContentPlaceHolder1_ctl00_TaskValue">Task</label>
<input id="ctl00_ContentPlaceHolder1_ctl00_TaskValue" type="text"  
name="ctl00$ContentPlaceHolder1$ctl00$TaskValue"/>
</li>
<li id="ctl00_ContentPlaceHolder1_ctl00_ComponentsLI">
<span>Specify</span>
<fieldset id="ctl00_ContentPlaceHolder1_ctl00_ComponentsFieldSet"  
class="fieldsetlist">
<legend>Software Components</legend>
<div id="ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList" class="AspNet- 
CheckBoxList">
<ul class="AspNet-CheckBoxList-RepeatDirection-Vertical">
<li class="AspNet-CheckBoxList-Item">
<input id="ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList_0"  
type="checkbox" value="2305"     
name="ctl00$ContentPlaceHolder1$ctl00$SoftwareComponentsCheckList$0"/>
<label for="ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList_0">Another  
Cool Component $1,000.00</label>
</li>
<li class="AspNet-CheckBoxList-Item">
<input id="ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList_1"  
type="checkbox" value="2306"   
name="ctl00$ContentPlaceHolder1$ctl00$SoftwareComponentsCheckList$1"/>
<label for="ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList_1">Software   
Assurance $274.89</label>
</li>
</ul>
</div>
</fieldset>
</li>
</ol>
</fieldset>

Answer 1

这可能对您有帮助:要在 JavaScript 中获取 ASP .NET 控件的 ID，请在 JavaScript 代码中使用如下所示的服务器标记:

$("#<%=lblMyAspNetLabel.ClientID %>").text("test");

其中 lblMyAspNetLabel 是 aspx 页面上的 asp:Label 控件的 ID。