0

在查看了我制作的过去的示例和源代码之后，我似乎无法<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，那么它应该找到<li><a></a></li>包含数字 7 的对应值并单击它。

我的麻烦在于在其中找到该值，我知道我需要在其中使用 find ，<ul>但困扰我的是基于一个值。

更新：

我只是想明确一点，这将是一个自动过程，所以我正在努力做到这一点，所以除了加载页面之外我不需要做任何事情。

4

4 回答 4

3

你需要类似的东西

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

演示：小提琴

于 2013-07-09T03:19:35.047 回答
1

无需像所有其他解决方案似乎正在做的那样循环并读取每个元素的 innerHTML。您可以使用选择器来完成。

由于 rel 属性似乎在末尾包含您所追求的数据:size，因此您可以使用 use:has()和end with$= selectors 来获取您所追求的 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");
}
于 2013-07-09T03:27:34.963 回答
0

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

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

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

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

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

于 2013-07-09T03:20:39.717 回答
0

由于您有一个rel以内容结尾的属性，因此您可以使用它：

$('a[rel$="\:'+valueToMatch+'"]').parent()
于 2013-07-09T03:26:09.877 回答