如何使JQuery event.target选择匹配常规选择

时间:2016-08-23 20:00:58

标签: jquery

我正在尝试从这些JQuery调用返回相同的对象。他们都在同一个cartList Jquery对象上进行DOM选择,但是一个是通过一个事件而另一个是来自常规选择器。

var cartWrapper = $('.cd-cart-container'); 
var cartBody = cartWrapper.find('.body')      
var cartList = cartBody.find('ul').eq(0);  

cartList.on('click', '.delete-item', function(event){
   obj1 = $(event.target).parents('.product');

}

obj2 = cartList.find('li.parent#seg_bookings_paid\\[1055\\]\\[504\\].product');

consle.log输出

obj1 = [li#seg_bookings_paid[1055][504].product, prevObject: o.fn.init[1], context: i.glyphicon.glyphicon-remove.text-danger]

obj2 = [prevObject: o.fn.init[1], context: document, selector: "li.parent#seg_bookings_paid[1055][504]"]

如何让obj2返回与obj1相同的对象?

HTML

<div class="cart">
    <div class="wrapper">
      <header>
        <h2>Cart</h2>
        <span class="undo">Item removed. <a href="#0">Undo</a></span>
      </header>

      <div class="body">
        <ul><li id="seg_bookings_paid[1055][504]" class="product"><div class="delete-item"><a href="#0"><i class="glyphicon glyphicon-remove text-danger"></i></a></div><div class="product-details">July 13: Far To Go<span class="price">0.00</span></div></li>
          <!-- products added to the cart will be inserted here using JavaScript -->
        </ul>
      </div>

      <footer>
        <a href="#0" class="checkout btn"><em>Checkout - $<span>NaN</span></em></a>
      </footer>
    </div>
  </div>

1 个答案:

答案 0 :(得分:0)

选择器中的

[...]用于匹配属性。如果你想用它来匹配ID中的这些文字字符,你必须将它们转义。

obj2 = cartList.find('li.parent#seg_bookings_paid\\[1055\\]\\[504\\].product');

您可以考虑为您的ID使用不同的命名方案,例如seg_bookings_paid-1055-504,因此您不能使用具有特殊含义的字符。