자녀가 검색 매개 변수와 일치하는 경우 아코디언 탭을 활성화하는 방법은 무엇입니까?

Question

나는 다음을 달성하려고 노력 해왔다. 사람들이 텍스트 (예 : 자동차 1)를 입력하고 Enter 키를 누른 다음 텍스트가있는 곳에서 jquery 아코디언을 열 수있는 텍스트 상자가 있다고 가정 해 보겠습니다. . 난 이미 여기에서 볼 수 있듯이 highlite 부분, 및 (일종의)을 검색 부분을 알아 낸 : 아직도

http://jsfiddle.net/q42ZC/13/

을, 나는 캔트 상당히 열려있는 부분 탭, 내가, 부모 또는 부모를 사용하여 시도를 얻을 수 있지만, 아무 소용이 있어도, 나는 그것이 잘못하고있는 것을 soemthing하고있다라는 것을 알고있다. 그러나 나는 그것이 어리 석다는 것을 이해하고있는 것처럼 보인다. 그래서 어떤 지침도 기꺼이 사과받을 것이다. 다음과 같이

내 코드가 간다 :

HTML

<div id="accordion" class="accordion"> 
     <h3>Tipo 1</h3> 

     <div> 
      <a> 
       <div class=""> 
        <p>Car 1</p> 
       </div> 
      </a> 
      <a> 
       <div class=""> 
        <p>Car 2</p> 
       </div> 
      </a> 
      <a> 
       <div class=""> 
        <p>Car 3</p> 
       </div> 
      </a> 
     </div> 
    <h3>Tipo 2</h3> 

    <div> 
     <a> 
       <div class=""> 
        <p>Car 21</p> 
       </div> 
      </a> 
     <a> 
      <div class=""> 
       <p>Car 4</p> 
      </div> 
     </a> 

    </div> 
    <h3>Tipo 5</h3> 

    <div> <a> 
      <div class=""> 
       <p>Car 6</p> 
      </div> 
     </a> 
    <a> 
      <div class=""> 
       <p>Car 8</p> 
      </div> 
     </a> 
    <a> 
     <div class=""> 
       <p>Car 12</p> 
      </div> 
     </a> 
    <a> 

     <div class=""> 
       <p>Car 16</p> 
      </div> 
     </a> 

    </div> 
</div> 

JS

$("#accordion").accordion({ 
     header: "h3", 
     navigation: true, 
     collapsible: true, 
     heightStyle: "content", 
     active: false 
    }); 

//Simulate the text im getting from textbox. 
    var word = "Car 1"; 

//this is not getting me the index i was expecting it to return, it returns values like 12 and 11. 
    alert($('#accordion div').index($('#accordion').find("a :contains('"+word+"')").parents("h3").get(0))); 
//this works, so i know i'm finding the text inside the accordion 
    $('#accordion').find("a :contains('"+word+"')").css("background-color","red"); 
//this does NOT work 
    $('#accordion').find("a :contains('"+word+"')").parent("h3").get(0).css("background-color","blue"); 
    //$('#accordion').accordion({active : 1}); <--This works, but how can i find the index to activate ? 

나는 또한에만 정확히 일치하는 단어를 "발견"할 수 있도록하고 싶습니다

에게, 그것은이다 말하자면, :contains은 자동차 1, 자동차 12 등을 계속 선택합니다. 자동차 1에만 매치시키고 싶습니다. 다른 경로로 가고 내 텍스트를 검색 할 때 전체 아코디언을 반복하는 것에 대해 생각하고있었습니다. 그러나 그것은 아코디언이 "탭"당 많은 항목을 포함 할 수 있기 때문에 과도한 것처럼 보였습니다. 그것으로 더 읽기

편집

, 그것은처럼 보인다는 쉽게로 thougether 인덱스 등을 무시하고 댓글에 sugested로, 클릭 이벤트에 대한 이동, 그래서 나는이 솔루션을 함께했다 jsut하는 경우에만 내 아코디언의 요소에 고유 한 텍스트가있는 경우 owrks; 이 솔루션은 다음이었다?

이

$('#accordion').find("a :contains('"+word+"')").parent().parent().prev().click(); 

내가이 솔루션을 정말 좋아 해달라고을,이 또한 부분적으로 만 정확한 텍스트 JQuery와에 의해 선택받을 일치하도록 나의 문제, 지금, 내가 어떻게 그것을해야합니까 해결, 내가 시도 다음과 같은,하지만 작동하지 않는 것, 텍스트와 내부 텍스트 사이의 모든 요소 비교는 단지 retunrs 거짓말, 심지어 그곳에있는 경기.

//This wont work 
    $('#accordion').find("a").filter(function() { 
     //alert($.trim($(this).text()) +" "+ $.trim(word) +" = "+ $.trim($(this).text()) === $.trim(word)); 
     return $.trim($(this).text()) === $.trim(word); 
    }).parent().parent().prev().click(); 

아이디어가 있으신가요?

편집 2

난 그냥 "해결"내 문제지만,이 솔루션은 누군가가 더 나은 솔루션을 지적한다면 내가 왜 문제로 폐쇄되지 않습니다 따라서, 사랑, 멀리 우아한에서이다 음 대답했다. 어쨌든, 내가 찾은 솔루션은 다음과 같이 진행됩니다

$.expr[':'].textEquals = $.expr.createPseudo(function(arg) { 
    return function(elem) { 
     return $(elem).text().match("^" + arg + "$"); 
    }; 
}); 

그리고 지금처럼 H3 요소를 클릭 :

$('#accordion').find("a :textEquals('"+ word +"')").parent().parent().parent().prev().click(); 

을 다시, 모든 끔찍한 모습이, 꼭이 문제를 해결하기 위해 더 나은 방법이 될 수있다.

Answer 1

글쎄, 내 문제를 "해결"하지만 해결책은 멀리 떨어져있다. 누군가가 더 나은 해결책을 지적한다면 나는 그것을 좋아할 것이다. 따라서 나는 대답으로 질문을 닫지 않을 것이다.어쨌든, 내가 찾은 솔루션은 다음과 같이 진행됩니다

다음

$.expr[':'].textEquals = $.expr.createPseudo(function(arg) { 
    return function(elem) { 
     return $(elem).text().match("^" + arg + "$"); 
    }; 
}); 

그리고 다음을 수행하여 "탭을"활성화 :

var selector = $('#acc').find("a :textEquals('" + $.trim(index) + "')"); 
    //i added a class to the "accordion item container (the div under the H3)" so that i could do the following 
    var header = selector.parents(".contenedor-folios").prev(); 
    var headerList = $('#acc').find('.contenedor-folios').prev(); 
    // then i can get the index of the "tab" and make it the active one. 
    var indexHeader = headerList.index(header); 
    $("#acc").accordion({ active: indexHeader }); 

희망은이 같은 상황에서 누군가를하는 데 도움이됩니다.