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

演示：Fiddle

Answer 2

没有必要循环读取每个元素的innerHTML，就像所有其他解决方案似乎正在做的那样。你可以用选择器来做。

由于rel属性似乎包含您在:size结束时所拥有的数据，因此您可以使用:has()和ends with $=选择器来获取您所拥有的数据。

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");
}

Answer 3

我会通过使您的结构更适合这些类型的查询来优化这一点

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

在li上添加一个与a标签值相对应的id。

然后你可以做一个简单的$("#10")选择器

虽然可以基于过滤器等制作复杂的选择器，但请记住，对于非浏览器支持的选择器（伪选择器），性能通常不会很好

Answer 4

由于您有一个内容完成的属性rel，您可以使用：

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

访问ul中的特定li

4 个答案: