jquery - 如何使用jQuery获取具有特定类的元素的ID属性

Question

我正在尝试获取具有当前类的锚的 ID 属性，或者它们的父 LI 具有当前类。

我试试这段代码：

    var terms = '';
    $('.product-tax li').each(function(){
        if ($(this).hasClass('current')) {
            terms += $(this).children('a').attr('id') + ':';
        } else if ($(this).children('a').hasClass('current')) {
            terms += $(this).children('a').attr('id') + ':';
        }
    });

但它不起作用，它给出了意想不到的结果。我想获取锚内的 ID，用于 LI 或锚的“当前”类。

基本上我正在使用每一个，因为有多个 .product-tax 并且用户进行了选择，但是可以将“当前”类添加到 LI 或锚点，这就是我需要检查的原因。此代码不起作用。

有什么建议么？

HTML：

<div class="product-tax product-color">
    <h3>Choose color</h3>
    <ul>
        <li><a href="#" id="color-pink" style="background: Pink;border: 1px solid Pink;"></a></li>
    </ul>
</div>


<div class="product-tax product-size">
    <h3>Choose size</h3>
    <ul>
        <li><a href="#" id="size-2s">2(s)</a></li>
        <li><a href="#" id="size-3m">3(m)</a></li>
        <li><a href="#" id="size-4l">4(l)</a></li>
        <li><a href="#" id="size-5xl">5(xl)</a></li>
        <li><a href="#" id="size-6xxl">6(xxl)</a></li>
    </ul>
</div>

Answer 1

您可以选择 LI 元素的所有锚子元素，以及当前类的所有子元素，如下所示：

var terms = "";
$(".product-tax li.current > a, .product-tax li > a.current").each(function(){
    terms = terms + $(this).attr("id") + ":"
});

Answer 2

试试这个

// get anchor with class current and anchor with parent li with class current
$('a.current,li.current > a').each(function(){
      alert(this.id);
});

Answer 3

    var terms = '';
    $('.product-tax li').each(function(){
      if ($(this).hasClass('current')) {
        terms += $(this).attr('id') + ':';
      }
      var $anchors = $(this).children("a");
      $anchors.each(function(){
        if ($(this).hasClass('current')) {
          terms += $(this).attr('id') + ':';
        }
      });
    });