2014-04-07 43 views
0

我一直在努力才达到下面,就让我们说我有一个文本框,在这里人们可以输入文本(比如汽车1),然后按下回车键,并有一个jquery手风琴打开其中的文本存在,并且的HIGHlite这样的内容。我已经想通了的HIGHlite部分,搜索部(排序)如下所示:如何使手风琴选项卡处于活动状态(如果其子选项符合搜索参数)?

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

不过,我不能完全得到开放的部分选项卡中,我一直在使用父母或父母尝试过,但无济于事,我知道这是我做错事的过程,但我似乎无法理解我做错了什么,所以任何指导都会很乐意被推崇。

我的代码去如下:

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上注释,请单击事件,所以我想出了这个解决方案只如果手风琴内的元素有独特的文字,该解决方案是以下几点:?

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

我真的不喜欢这样的解决方案,这也只是部分地解决了我的问题,现在,我怎么让这个只有确切的文本匹配的jQuery都被选择,我试过接下来,但似乎没有工作,文本和内部文本之间的每一个元素比较只是重新编译错误,即使是它在那里的匹配。

//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(); 

有什么想法吗?

EDIT 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(); 

同样,这一切看起来可怕,有一定有解决这个更好的方法。

+0

很多东西在你的小提琴不工作。我认为你正在寻找手风琴头上的.trigger('click')。 – ginman

+0

那么什么是“不工作”的部分,我还没有弄清楚(几乎所有下面的var word声明),也就是说,我不知道什么标题“触发”点击事件,因为我可以'告诉哪个div包含我正在查找的文本,或者是与我正在搜索的文本相关的那个标题。 –

回答

0

好吧,我只是“解决”我的问题,但解决的办法是远离优雅的,如果有人想指出一个更好的解决方案,我会爱,因此为什么我不会被关闭的问题作为回答。无论如何,我找到了解决办法是这样的:

$.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 }); 

希望这有助于在相同的情况下有人。

相关问题