jquery：按属性查找第一个元素

问题描述

我在网页的左侧列出了一些类别，并在右侧列有一个列表。包含项目的列表有一个名为cat的属性，值为数字。

点击该类别应该滚动到第一个具有相同类别标识的项目。

任何提示？ ：）

这里是html：

  asp：Repeater runat =serverID =repCategoryOnItemDataBound =CategoryItemRepeater> 
< HeaderTemplate> 
< ul class =menuListUl> 
< / HeaderTemplate> 
< ItemTemplate> 
< li> 
< div id =catItemrunat =server>< / div> 
< / li> 
< / ItemTemplate> 
< FooterTemplate>< / ul>< / FooterTemplate> 
< / asp：中继器> 
 
 
< div id =menuList> 
< asp：Repeater runat =serverID =repFooditemsOnItemDataBound =MenuItemRepeater> 
< ItemTemplate> 
< div class =menuItemid =menuItemrunat =server> 
< div runat =serverclass =itemNumberid =ItemId>< / div> 
< div runat =serverclass =itemNameid =itemName>< / div> 
< div runat =serverclass =itemDescriptionid =itemDescriptionLbl>< / div> 
< / div> 
< / ItemTemplate> 
< / asp：中继器> 
 
< / div> 
  

Codebehind：

Categorylist：

  var lbl =（HtmlGenericControl）e.Item.FindControl（catItem）; 
 
 lbl.Attributes.Add（catId，+ rest.CategoryId）; 
  

物品清单：

  var menuItem =（HtmlGenericControl）e.Item.FindControl（menuItem）; 
 menuItem.Attributes.Add（cat，cat+ item.Item.Category.FirstOrDefault（）。CategoryId）; 
  

jquery：

  $（'。menuListUl li div'）。bind（'click'，function（）
 {
 var catId = $（this）.attr（'catid'）; // 
 
 
 //现在：找到第一个具有相同cat ID的元素
 
 var element =;找到的元素。 
 $ b $（'html，body'）。animate（{
 scrollTop：element.offset（）。top 
}，2000）; 
}）; 
  

解决方案

这会选择带有'foobar'的元素作为catid。这似乎是你想要的吗？

$ $ $''menuListUl li div [catid =foobar]'）

I have a list with categories on my left side on the webpage, and a list with items on the right side. The list with items have an attribute called cat, and the values are numbers.

Clicking on the category should scroll me to the first item with the same categoryid.

Any tips? :)

Here is the html:

asp:Repeater runat="server" ID="repCategory" OnItemDataBound="CategoryItemRepeater">
            <HeaderTemplate>
                <ul class="menuListUl">
            </HeaderTemplate>
            <ItemTemplate>
                <li>
                    <div id="catItem" runat="server"></div>
                </li>
            </ItemTemplate>
            <FooterTemplate></ul></FooterTemplate>
        </asp:Repeater>


 <div id="menuList">
            <asp:Repeater runat="server" ID="repFooditems" OnItemDataBound="MenuItemRepeater">
                <ItemTemplate>
                    <div class="menuItem" id="menuItem" runat="server">
                        <div runat="server" class="itemNumber" id="ItemId"></div>
                        <div runat="server" class="itemName" id="itemName"></div>
                        <div runat="server" class="itemDescription" id="itemDescriptionLbl"></div>
                    </div>
                </ItemTemplate>
            </asp:Repeater>

        </div>

Codebehind:

Categorylist:

var lbl = (HtmlGenericControl)e.Item.FindControl("catItem");

lbl.Attributes.Add("catId",""+rest.CategoryId);

ItemList:

var menuItem = (HtmlGenericControl)e.Item.FindControl("menuItem");
            menuItem.Attributes.Add ("cat","cat"+item.Item.Category.FirstOrDefault().CategoryId);

jquery:

$('.menuListUl li div').bind('click', function ()
        {
            var catId = $(this).attr('catid'); //The categoryid on the element clicked.


            // Now: find the first element with the same cat id

            var element = ""; The element found.

            $('html, body').animate({
                scrollTop: element.offset().top
            }, 2000);
        });

解决方案

This will select you the elements with 'foobar' as the catid. It seems to be this what you want right?

$('.menuListUl li div[catid="foobar"]')

这篇关于jquery：按属性查找第一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！