Question

我的HTML

<ul style="height: 792px;" id="scroller1" data="business_ids" class="business_types simply-scroll-list">
         <li style="color:#c3c3c3;">Select Business Type</li>
         <li><a class='types' href="#" data="59" class="selected">Table Service</a></li>
     <li><a class='types' href="#" data="60">Quick Service</a></li>
     <li><a class='types' href="#" data="75">Bar Nightclub</a></li>
     <li><a class='types' href="#" data="61">Take-Out &amp; Delivery</a></li>
     <li><a class='types' href="#" data="67">Drive-Thru</a></li>
     <li><a class='types' href="#" data="68">Yogurt &amp; Ice Cream</a></li>
     <li><a class='types' href="#" data="69">Catering</a></li>
     <li><a class='types' href="#" data="70">Coffee</a></li>
     <li><a class='types' href="#" data="58">General Retail</a></li>
     <li><a class='types' href="#" data="55">Tobacco Store</a></li>
     <li><a class='types' href="#" data="63">Liquor Store</a></li>
     <li><a class='types' href="#" data="62">Grocery Store</a></li>
     <li><a class='types' href="#" data="73">Convenience Store</a></li>
     <li><a class='types' href="#" data="66">Video Rentals</a></li>
     <li><a class='types' href="#" data="71">Fabric</a></li>
     <li><a class='types' href="#" data="72">Jewelry</a></li>
     <li><a class='types' href="#" data="54">Bakery</a></li>
     <li><a class='types' href="#" data="64">Hair Salon</a></li>
     <li><a class='types' href="#" data="74">Medical &amp; Health Spa</a></li>
     <li><a class='types' href="#" data="65">Automotive</a></li>
<li><a href="#"></a></li>

</ul>

我的jQuery

var element = $("#scroller1").find('a[data=72]');

这将选择此元素

     <li><a class='types' href="#" data="72">Jewelry</a></li>

但是我如何计算在我之上class='types'的标签数量...所以在这种情况下14个标签上面......任何想法

Answer 1

您可以使用jquery索引方法：http://api.jquery.com/index/

所以你会说：

var element = $("#scroller1").find('a[data=72]');
var itemsAboveCount = $('.types').index(element) - 1;

带代码的完整示例

<html>
<head>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">


    function test()
    {
        var element = $("#scroller1").find('a[data=72]');
        alert($('.types').index(element));
    }
    </script>
</head>
<body onload="test();">
<ul style="height: 792px;" id="scroller1" data="business_ids" class="business_types simply-scroll-list">
         <li style="color:#c3c3c3;">Select Business Type</li>
         <li><a class='types' href="#" data="59" class="selected">Table Service</a</li>
         <li><a class='types' href="#" data="60">Quick Service</a></li>
         <li><a class='types' href="#" data="75">Bar Nightclub</a></li>
         <li><a class='types' href="#" data="61">Take-Out &amp; Delivery</a></li>
         <li><a class='types' href="#" data="67">Drive-Thru</a></li>
         <li><a class='types' href="#" data="68">Yogurt &amp; Ice Cream</a></li>
         <li><a class='types' href="#" data="69">Catering</a></li>
         <li><a class='types' href="#" data="70">Coffee</a></li>
         <li><a class='types' href="#" data="58">General Retail</a></li>
         <li><a class='types' href="#" data="55">Tobacco Store</a></li>
         <li><a class='types' href="#" data="63">Liquor Store</a></li>
         <li><a class='types' href="#" data="62">Grocery Store</a></li>
         <li><a class='types' href="#" data="73">Convenience Store</a></li>
         <li><a class='types' href="#" data="66">Video Rentals</a></li>
         <li><a class='types' href="#" data="71">Fabric</a></li>
         <li><a class='types' href="#" data="72">Jewelry</a></li>
         <li><a class='types' href="#" data="54">Bakery</a></li>
         <li><a class='types' href="#" data="64">Hair Salon</a></li>
         <li><a class='types' href="#" data="74">Medical &amp; Health Spa</a></li>
         <li><a class='types' href="#" data="65">Automotive</a></li>
<li><a href="#"></a></li>

</ul>
</body>

Answer 2

在DOM的termo之上，您有<a>个class='types'标记a，因为每个li标记都是<li>的唯一子标记，所以如果你上去了DOM树只有<ul>，然后是var element = $("#scroller1").find('a[data=72]'); //Count the number of <li> element which has a direct child which is an <a> witch class types var howmany = element.parent().prevAll('li:has(a.types)').length; alert(howmany);

无论如何你可以这样做：

{{1}}

在这里小提琴：http://jsfiddle.net/nicolapeluchetti/GZXpY/

Answer 3

试试这个

var $refElem = $("#scroller1").find('a[data=72]');
var noOfElemBeforeRefElem = $refElem.parent().prevAll().filter(function(){
   return ($(this).has('a.types').length > 0);  
}).length;
//This will give the number of elements above the reference element.
alert(noOfElemBeforeRefElem);

我怎么知道有多少儿童元素在我之上

3 个答案: