在ul中訪問特定的li

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，但是讓我感到沮喪的是基於一個值。

更新：

我只想澄清一下，這將是一個自動過程，因此我正在嘗試做到這一點，因此除了加載頁面外，我無需執行任何操作。

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')

演示： 小提琴

Answer 2

像其他所有解決方案一樣，無需遍歷並讀取每個元素的innerHTML。 您只需使用選擇器即可。

由於rel屬性似乎在:size結尾處具有您要獲取的數據，因此可以使用use :has()並以$=選擇器結尾來獲取您要獲取的lis。

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

如果要單擊它，則可以調用.trigger("click") .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");
}

Answer 3

我將通過使您的結構更適合這些類型的查詢來優化此設置

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

在與a標記值相對應的li上放置一個id。

然后，您可以做一個簡單的$("#10")選擇器

雖然可以根據過濾器等制作復雜的選擇器，但請記住，對於非瀏覽器支持的選擇器（偽選擇器），性能通常不會很好

Answer 4

由於您擁有一個以內容rel屬性，因此可以使用此屬性：

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