1

http://www.bulgaria-web-developers.com/projects/javascript/selectbox/を使用して選択ボックスを変更しています。

以下に例を示します: http://jsfiddle.net/ukkpower/bczrc/1/

クリックすると、その下の「a」タグ内のテキストを取得するボタンがあります。私はこれらの「a」の2つのタイプを持っています。1 つはページ読み込み時のコードの一部であり、もう 1 つはセレクト ボックス プラグインで動的に作成されます。

ページの一部である「a」タグからテキストを取得できますが、動的なものは空の文字列になります。画面にテキストが表示され、firebug で検査するとテキストが表示されます。

なぜ$(this).next(".menuItem").text()動的なもので動作しないのですか? 14 フィート - €14.14

 //button to get text
<a href="javascript:void(0)" class="addToCart cart"></a>

<div id="sbHolder_51608882" class="sbHolder" tabindex="1">
    <a id="sbToggle_51608882" href="#" class="sbToggle"></a>
    <a id="sbSelector_51608882" href="#" class="sbSelector menuItem">14' - €14.14</a>
         <ul id="sbOptions_51608882" class="sbOptions" style="display: none;">
              <li><a href="#1" rel="1">6' - €6.66</a></li>
              <li><a href="#2" rel="2">12' - €12.12</a></li>
              <li><a href="#3" rel="3" class="sbFocus">14' - €14.14</a></li>
         </ul>
</div>

これは正常に機能し、ロード時のページの一部です。

<a href="javascript:void(0)" class="addToCart cart"></a>
<span class="price menuItem">12' - €12.99</span>
4

1 に答える 1

1

あなたの期待は間違っています。.next()は、すぐ次の要素 (兄弟) をフェッチします。HTML を見ると、次の兄弟であることがわかります。

<a href="javascript:void(0)" class="addToCart cart"></a>

は ：

<div id="sbHolder_51608882" class="sbHolder" tabindex="1">

.menuItem内にあるクラスでアンカーにアクセスする場合は、内にdiv移動する必要がありdivますfind。

$(this).next("div.sbHolder").find("a.menuItem").text();

DEMO - からの表示値.menuItem

編集
2 つの異なるシナリオに対処するには、いくつかのロジックを適用できます。この特定のロジックは、常にどちらかのシナリオがある場合に機能します。もちろん、完全にランダムで予測不可能なシナリオがある場合、これは機能しません。

$(".addToCart").on("click", function() {
    var $menuItem = $(this).next(".menuItem");

    if($menuItem[0] === undefined){
        $menuItem = $(this).next().find(".menuItem");
    }
    alert($menuItem.text());
});​

デモ- すぐ次の次またはすぐ次の.menuItem子を検索.menuItem

于 2012-08-24T20:57:17.357 に答える