使用 :contains 或类似方法仅选择第一个元素

Posted 2023-02-23

【中文标题】使用 :contains 或类似方法仅选择第一个元素

【英文标题】：Select only first element using :contains or similar

【发布时间】：2017-05-21 13:42:45

【问题描述】：

我有一个 svg 地图，它的“g”属性上有 id，每个产品都有一个类的列表。单击地图上的某个部分时，该部分类与“g”元素上的 id 匹配的产品将被过滤。

这是我的代码。

<g id="225" class="available">
      <polygon points=" 1302.4 446.2 1238.2 469.4 1310 530.1 1375.1 505.3 " class="i"></polygon>
    </g>

jQuery(document).ready(function($)
    $('g g').on('click', function (e) 
        e.preventDefault();
        var $svgelement = $(this);
        var id = $svgelement.attr('id');
        var $item = $('.Ticket');
        var $itemChild = $('div.product:first-child:contains('+id+')');

        $item.filter(function(e)

            if($(this).find($itemChild).length > 0)
                $(this).slideDown('fast');
             else 
                $(this).slideUp('fast');
            

        );
    );
);

<div class="Ticket">
<div class="first post-4490 product type-product status-publish product_cat-kentucky-derby-grandstand-tickets product_cat-kentucky-derby-tickets product_tag-section-225 pa_row-f taxable shipping-taxable purchasable product-type-simple product-cat-kentucky-derby-grandstand-tickets product-cat-kentucky-derby-tickets product-tag-section-225 instock">

    <div class="ticketSection col">
    <!--<a href="https://www.derbydeals.com/ticket/derby-section-225-row-f/">-->
<span class="Section">
    225<br>     <!--</a>-->
</span>

</div>

<div class="ticketRow col">
    <span class="rowNum">
    F<br>   </span>
</div>

<!--<div style="visibility: hidden; position: absolute;" class="ticketQty col">
    <span class="Qty">10</span>
</div>-->

<div class="ticketPrice Price col"><span style="display: none;"> data-value="475"&gt;</span>


    <span class="price"><span class="amount">$475.00</span></span>

<!--<a href="https://www.derbydeals.com/ticket/derby-section-225-row-f/" class="single_add_to_cart_button button alt">
View Details
</a>-->
</div>
<div class="orderOpen col">
    <!--<span class="qtyMsg">How many tickets?</span>-->



    <form class="cart" method="post" enctype="multipart/form-data">

        <div class="quantity_select" style="float:left; margin-right:10px;"><select name="quantity" title="Qty" class="qty"><option value="2">2</option><option value="4">4</option><option value="6">6</option></select></div>
        <input type="hidden" name="add-to-cart" value="4490">

        <button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>

            </form>


    <div class="detailsLink">
<a href="https://www.derbydeals.com/ticket/derby-section-225-row-f/" class="alt">View Seating Details</a>
</div>
</div>
</div>
</div>

这很好用，只是它也在寻找兄弟姐妹；使用 :contains 可能会出现问题。

例如，单击地图上的第 225 部分会正确过滤类别名称中包含第 225 部分的所有产品，但它也会显示价格中包含 225 的产品。所以它会显示第 322 部分，因为价格是 1,225。

我尝试使用过滤器作为函数，next、:first-child、最接近、first 和 :contains 的不同组合，但没有任何效果。

有什么办法可以解决这个问题吗？

更新！

这是一个 jsfiddle - https://jsfiddle.net/k9uvqhxb/1/

【问题讨论】：

我不确定我是否理解您的问题，但按照您的标题，我会说 var $itemChild = $('div.product:first-child:contains('+id+')' )[0];

这不起作用，所以我添加了 jquery 正在寻找更多上下文的代码。问题是它不仅在 .Ticket 之后查看 div，而且使用 first-child 似乎不起作用。

您可以为此创建一个jsfiddle 吗？

现在我更好地理解了你的问题。我会更改您的代码，将类或数据属性添加到产品容器中。然后改变 $('div.product:first-child:contains('+id+')');到 $('.CLASSNAME');

我在 OP 中添加了一个 jsfiddle

【参考方案1】：

我在 .Ticket div 中添加了一个类，它是产品术语的 slug，所以 g id 是 225 并且 .Ticket 有另一个名为 225 的类或任何 slug

现在我只是像这样使用 hasClass

jQuery(document).ready(function($)
    $('g g').on('click', function (e) 
        e.preventDefault();
        var $svgelement = $(this);
        var id = $svgelement.attr('id');
        var $item = $('.Ticket');

        $item.each(function(e)

            if($(this).hasClass(id))
                $(this).slideDown('fast');
             else 
                $(this).slideUp('fast');
            

        return;

        );
    );
);

按预期工作