Javascript 使用“包含”或“类似”仅选择第一个元素

我有一个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>

jQuery（文档）.ready（函数（$）{
$（'g'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var$svgelement=$（本）；
变量id=$svgelement.attr（'id'）；
变量$item=$（'.Ticket'）；
var$itemChild=$（'div.product:first-child:contains（'+id+'））；
$item.filter（函数（e）{
if（$（this）.find（$itemChild）.length>0）{
$（this.slideDown（'fast'）；
}否则{
$（this.slideUp（'fast'）；
}
});
});
});
246
添加到购物车

这很好，只是它也在寻找兄弟姐妹；使用：contains可能有问题

例如，单击地图上的section 225（第225节）会正确过滤所有产品，并在类名中使用section 225，但它也会显示价格中包含225的产品。因此，它将显示第322节，因为价格是1225

我已经尝试使用过滤器作为函数，下一步，：first child、closest、first和不同的组合：contains，但没有任何效果

有没有办法解决这个问题

更新

---

这是一个JSFIDLE-

我在.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;

        });
    });
});

---

我不确定我是否理解您的问题，但在您的标题之后，我会说var$itemChild=$（'div.product:first child:contains（'+id+'））[0]；这不起作用，所以我添加了jquery正在查看的代码以获取更多上下文。问题是，这不仅仅是看电影票后的div，而是使用first child似乎不起作用。你能为它创建一个新的版本吗？现在我对你的问题有了更好的理解。我会更改代码，将类或数据属性添加到产品容器中。然后更改$（'div.product:first child:contains（'+id+'））；美元（'.CLASSNAME'）；我在OP中添加了一个JSFIDLE