2013-04-27 8 views
0

Мой HTML выглядит следующим образом:Jquery: Получить класс родителя с помощью джокера

<div class="row side cards-row-1 cards-row"> 
    <a href="#" class="card cards-front"> Text </a> 
</div> 

<div class="row side cards-row-2 cards-row"> 
    <a href="#" class="card cards-front"> Text </a> 
</div> 

<div class="row side cards-row-3 cards-row"> 
    <a href="#" class="card cards-front"> Text </a> 
</div> 

Мне нужно получить значение количество карт-строки, когда пользователь нажимает на ссылку.

Я думал, что лучший способ сделать это - использовать селектор JQuery parent и селектор wildcard.

Это мой Jquery код:

(function($) { 
    $(document).ready(function() { 
     "use strict"; 
     $('.cards-front').click(function(e) { 
      e.preventDefault(); 
      $('.cards-row').removeClass('cards-expand'); 
      var classes = $(this).parent().attr("[class^=card-row-]"); 
      alert(classes); 
      $(this).parent().addClass('cards-expand'); 
      $(this).insertAfter('<div class="cards-shadow"></div>'); 
     }); 

     $('.cards-back .close').click(function() { 
      $('.cards-row').removeClass('cards-expand'); 
      $('.cards-shadow').remove(); 
     }); 

    }); 

})(jQuery); 

Я использую alert classes, чтобы проверить, какой номер был захвачен в плен. Однако, вместо того, чтобы захватить значение он просто говорит undefined

I have a JS Fiddle here.

Я не уверен, что я делаю неправильно, и был бы признателен за любые указатели. Благодаря!

ответ

2

Ваш селектор является неправильным, если вы хотите получить имя класса, вам нужно сделать:

var classes = $(this).parent().attr("class"); 

Если вы просто хотите, чтобы получить номер после cards-row-, а не буквы, то вы можете использовать это регулярное выражение:

var classes = $(this).parent().attr("class").match(/cards-row-(\d+)/); 

Но на самом деле, вы можете использовать index() в этом случае:

var classes = $(this).parent().index() + 1; 

Поскольку index() значение 0 на основе так, что вам нужно увеличить его на 1, чтобы получить правильное значение:

Updated Fiddle

+0

Спасибо, что работает отлично. Однако я не понимаю: к чему относится +1? Например, в «row-side cards-row-1 card-row», «card-row-1» является вторым значением. Итак, когда вы используете +1, как Jquery знает, как выбрать «cards-row-1» вместо «side»? –

+0

@big_smile Этот метод не выбирает имя класса, а 'index' вашего div. – Eli

+0

Учтите, что если ваши divы не в правильном порядке, то число, которое вы получите, будет неправильным. [Пример] (http://jsfiddle.net/Spokey/nSzer/4/) – Spokey

1
var classes = $(this).parent().attr("class"). 
     match(/cards-row-(\d)/)[1]; 

См отредактированный fiddle.

0

Легче всего было бы лишить буквы и оставить только номер

var classes = $(this).parent().attr('class').match(/\d+/g); 
Смежные вопросы