訪問內的UL

Question

特定麗看着過去的例子，我做了源代碼後，我似乎無法制定出基於內收發的參數訪問特定<li><a>the value in this</a></li>

樣機：

<ul class="selectBox-dropdown-menu selectBox-options size-dropdown mediumSelect footwear" style="top: 309px; left: 34px; display: none;"> 
    <li class="" style="display: none;"><a rel=""></a></li> 
    <li class="size-not-in-stock"><a rel="3096786:6"> 6</a></li> 
    <li class="size-not-in-stock"><a rel="3096787:6.5"> 6.5</a></li> 
    <li class=""><a rel="3096788:7"> 7</a></li> 
    <li class="selectBox-selected"><a rel="3096789:7.5"> 7.5</a></li> 
    <li class=""><a rel="3096790:8"> 8</a></li> 
    <li class=""><a rel="3096791:8.5"> 8.5</a></li><li><a rel="3096792:9"> 9</a></li> 
    <li><a rel="3096793:9.5"> 9.5</a></li><li><a rel="3096794:10"> 10</a></li> 
    <li><a rel="3096795:10.5"> 10.5</a></li><li><a rel="3096796:11"> 11</a></li> 
    <li><a rel="3096797:11.5"> 11.5</a></li><li><a rel="3096798:12"> 12</a></li> 
    <li><a rel="3096799:12.5"> 12.5</a></li><li><a rel="3096800:13"> 13</a></li> 
    <li><a rel="3096801:14"> 14</a></li><li><a rel="3096802:15"> 15</a></li></ul> 
    </ul> 

這是我想要得到的。讓我們說一個用戶輸入7的值，好於它應該找到包含數字7的對應的<li><a></a></li>並點擊它。

我的煩惱在於找到這個值，我知道我需要在<ul>之內使用find，但是我的結果是基於一個值。

UPDATE：

我只是想明確指出，這是將是一個自動的過程，所以我想讓它，所以我沒有做，除了加載頁面的任何東西。

Answer 1

你需要像

var test = "the content to seek"; 
$('ul.footwear').find('a').filter(function(idx, el){ 
    return $.trim($(this).text()) == $.trim(test); 
}).closest('li').trigger('click') 

演示：Fiddle

Answer 2

我會通過使你的結構更適合這些類型的查詢優化這個

<li id="10"><a rel="3096793:9.5"> 9.5</a></li><li><a rel="3096794:10"> 10</a></li> 

把一個ID上慄這對應於a標籤的值。

然後，你可以做一個簡單的$("#10")選擇

雖然它可能使基於過濾器等複雜的選擇，請記住，性能不會對非瀏覽器支持選擇器（僞選擇）

一般是巨大的

Answer 3

既然你有與內容完成屬性rel，您可以使用此：

$('a[rel$="\:'+valueToMatch+'"]').parent() 

Answer 4

無需遍歷和讀取每一個元素的innerHTML像所有其他解決方案似乎都在做。你可以用選擇器來做。

由於rel屬性似乎有結尾:size後面的數據，因此您可以使用使用:has()和ends with $=選擇器來獲取您在之後的lis。

var num = 7; 
var elems = $(".footwear li:has(a[rel$=':" + num + "'])"); 
console.log(elems.length); 

如果你想點擊它，不是你叫.click()或.trigger("click")

function findAndClick (size) { 
    var elem = $(".footwear li:has(a[rel$=':" + size + "'])"); 
    elem.trigger("click"); 
} 

，並觸發它的頁面加載它會是這樣的

$(window).on("load", function() { findAndClick(7); }); 

或文檔準備好

$(function() { findAndClick(7); }); 

可悲的是，這個解決方案似乎對於一個簡單的選擇器來說非常棒，但性能可能會低於標準。如果只有一個元素的大小，最好的性能將是一個each()循環，當你找到一個元素時會跳出循環。無需看其他元素。

---

效果最好的將是一個each()

function findAndClick (size) { 
    var elem; 
    size = size.toString(); 
    $('.footwear').find('a').each(function() { 
     if ($.trim($(this).text()) == size) { //compare the text 
      elem = $(this).parent(); //set the element that contains the link 
      return false; //exit each loop 
     } 
    }); 

    if (elem) { 
     elem.trigger("click"); //fire click 
    } 
} 

---

爲了更好的性能，無需讀取元素的文本或使用結束與選擇。將數據屬性添加到元素。

<li data-size="7"> 

，比你只使用選擇

function findAndClick (size) { 
    $('.footwear li[data-size="' + size + '"]').trigger("click"); 
}