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 属性には目的のデータが end にあるように見えるため、:sizeuse:has()とendを$=セレクターで使用して、目的の 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); } );

悲しいことに、このソリューションは単純なセレクターで優れているように見えますが、パフォーマンスは標準以下になる可能性があります。そのサイズの要素が 1 つしかない場合、最高のパフォーマンスはeach()、1 つの要素を見つけたときにループして抜け出すことです。他の要素を見る必要はありません。

最高のパフォーマンスは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
    }
}

パフォーマンスをさらに向上させるには、要素のテキストを読み取る必要をなくすか、ends with セレクターを使用します。要素にデータ属性を追加します。

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

a タグの値に対応する id を li に付けます。

次に、簡単な$("#10")セレクターを実行できます

フィルターなどに基づいて複雑なセレクターを作成することは可能ですが、ブラウザーに依存しないセレクター (疑似セレクター) のパフォーマンスは一般的に優れていないことに注意してください。

于 2013-07-09T03:20:39.717 に答える