在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()