2012-02-25 5 views
1

질문
JQuery와 와일드 카드를 각각 사용하여 각 클래스를 분할하는 방법이 있습니까?와일드 카드 각각에서 JQuery 사용

편집 : 내 경우에는 클래스 대신 rel을 사용하여 요소를 분할하고 싶습니다.

배경
지금 난 그냥 정말 큰 해킹 각 fancybox 그룹에 대한 별도의 코드 블록을 생성하고,하지만 작동합니다. 이 코드를 PHP 클래스에서 꺼내 html 뷰에 넣고 각 예제 그룹에 대해 새 블록을 갖는 것만 쓰면됩니다. 나는 방법이 있다고 확신하지만, 지금은 일시적인 해킹에 빠져 있습니다.

현재 코드 이것은 확인해 값 "example_group"로 시작하는 모든 앵커를 대상으로합니다


     (function($) { 
      $("a[rel^=example_group").fancybox({ 
       'transitionIn'  : 'none', 
       'transitionOut'  : 'none', 
       'titlePosition'  : 'over', 
       'cyclic'   : true, 
       'titleFormat'  : function(title, currentArray, currentIndex, currentOpts) { 
        return 'Image ' + (currentIndex + 1) + '/' + currentArray.length + (title.length ? '   ' + title : '') + ''; 
       } 
      }); 
     })(jQuery); 

+0

단지 'rel' 속성 * [시작하는 모든 a 요소를 선택하기를 원한다는 말입니까? with] (http://api.jquery.com/attribute-starts-with-selector/) *' "example_group"'? –

+0

네, 맞습니다. 나는 왜 내가 수업을 말했는지 확신 할 수 없다. 그러나 나를 위해 필요한 모든 것은 "a"를 "rel"로 대체하는 것이다. 그것을 잡아 주셔서 감사합니다! – dkroy

답변

4
$('a[rel^="example_group"]'); 


     (function($) {//use jquery each 
      $("a[rel=example_group$group]").fancybox({ 
       'transitionIn'  : 'none', 
       'transitionOut'  : 'none', 
       'titlePosition'  : 'over', 
       'cyclic'   : true, 
       'titleFormat'  : function(title, currentArray, currentIndex, currentOpts) { 
        return 'Image ' + (currentIndex + 1) + '/' + currentArray.length + (title.length ? '   ' + title : '') + ''; 
       } 
      }); 
     })(jQuery); 

솔루션. 자세한 내용은

<a ... rel="example_group1">Group 1</a> 
<a ... rel="example_group2">Group 2</a> 
<a ... rel="example_group_ponies">Ponies!</a> 

Attribute Starts With Selector 체크 아웃 : 그 말은, 다음의 모든를 대상으로합니다.

+0

고마워, 그게 내가 찾고 있었던 바로 그 것이다. 나는 단지 그것을 이해할 수없는 이유로 잠의 부족에 기여할 수 있습니다 ... – dkroy

1

이전에 여러 번 수행되었습니다. 그게 바로 질문을 가지고있는 경우입니다 :)

그럼 내가 어떻게 그런 경향이 당신이 그것을 밖으로 루프 또는 요소에 클래스 또는 ID를 추가하는 경향이있다. 당신은 슬라이더가있는 경우와 같은. 그런 다음 컨트롤에 대한 일반적인 HTML 모양 :

<ul class="controls"> 
    <li class="control control-1" rel="1"></li> 
    <li class="control control-2" rel="2"></li> 
</ul> 

적어도 나를 위해 일반적입니다. 그래서 여러분이 할 수있는 모든 통제를 위해 무언가를 할 것이라고 가정 해 봅시다. 다음과 같이 쉽게 :

$('ul.controls li.control').each(function() { 
    console.log($(this).attr('rel')); 
}); 

그래서 현재 그룹을 설명하는 추가 클래스를 그룹화하면됩니다. 그런 다음 다른 클래스에 "-idhere"가 있으므로 직접 rel을 사용하여 id를 직접 지정할 수 있습니다.

-

확실하지 않은 질문이 있습니다. 하지만 그것에 의견을 남기고 내가 만약 내가 해결책을 가지고 있는지 알 수 없을 것이다. :)

+0

+1이 또한 나를 위해 일했지만, 나는 조나단의 해결책을 가지고 가기로 결정했습니다. – dkroy