7 
<div id="calcwrapper">
    <img class="sugarcube" src="images/sugarcube.png" width="13" height="17">
    <div id="drinks">
        <a id="drink1" href=""><img src="images/drinkicon1.png" width="84" height="81"></a><div class="drink1"></div>
    </div>
</div>

上記の例では、ドリンク ボタンは 1 つしかありませんが、私のコードには 8 つのボタンが含まれています。それぞれに対応する同名のクラス化された div があります。私がやろうとしているのは、アンカー タグの ID (id="drink1") を「動的に」取得して、クローン シュガー キューブ イメージ (img class="sugarcube" ...) を同等のクラス名 div (class ="drink1")。混乱しないように願っています。おそらく、以下の失敗した試みにより、私が達成しようとしていることのいくつかのアイデアが得られるでしょう.

試行 1

$(".sugarcube").clone().attr("class", "sugarcube" + i).appendTo($(this).parent((".drink1").attr("class")));

試行 2 (コンソールを介して有効なソリューションを見つけようとしています)

var className = $(this).attr("id");
console.log(className);

console.log($(this).parent().children("div").hasClass(className));

Google と StackOverflow を検索しましたが、コード サンプルは見つかりませんでした。ご協力ありがとうございました。

完全な HTML コードのコンテキストは次のとおりです...

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
    <script src="js/jquery-animate-css-rotate-scale.js"></script>
    <script>
        $(function() {
            $(".sugarcube").hide();
            var max = 8;
            function animateSugarcubes() {
                for (var i=1; i<=max; i++) {
                    $(".sugarcube" + i).css("position", "absolute");
                    $(".sugarcube" + i).css("top", Math.ceil(Math.random() * (50 - 20) + 20));
                    $(".sugarcube" + i).css("left", Math.ceil(Math.random() * (85 - 40) + 40));
                    $(".sugarcube" + i).hide();
                }
            }

            $("#drinks a").click(function() {

                for (var i=1; i<=max; i++) {
                    // Attempt 1
                    $(".sugarcube").clone().attr("class", "sugarcube" + i).appendTo($(this).parent().children($(this).attr("id")));

                    // Attempt 2 test code.
                    var className = $(this).attr("id");
                    console.log($(this).parent().children("div").hasClass(className));
                }

                return false;
            });
            animateSugarcubes();
        }); 
    </script>
</head> 
<body> 

<div id="calcwrapper">
    <img class="sugarcube" src="images/sugarcube.png" width="13" height="17">
    <div id="drinks">
        <a id="drink1" href=""><img src="images/drinkicon1.png" width="84" height="81"></a><div class="drink1"></div>
        <a id="drink2" href=""><img src="images/drinkicon2.png" width="84" height="81"></a><div class="drink2"></div>
        <a id="drink3" href=""><img src="images/drinkicon3.png" width="84" height="81"></a><div class="drink3"></div>
        <a id="drink4" href=""><img src="images/drinkicon4.png" width="80" height="81"></a><div class="drink4"></div>
        <a id="drink5" href=""><img src="images/drinkicon5.png" width="84" height="81"></a><div class="drink5"></div>
        <a id="drink6" href=""><img src="images/drinkicon6.png" width="84" height="81"></a><div class="drink6"></div>
        <a id="drink7" href=""><img src="images/drinkicon7.png" width="84" height="81"></a><div class="drink7"></div>
        <a id="drink8" href=""><img src="images/drinkicon8.png" width="84" height="81"></a><div class="drink8"></div>
    </div>
</div>

</body> 
</html>

アンカー タグは id (id="drink1") を使用し、div はクラス (class="drink1") を使用することに注意してください。

4

3 に答える 3

4

あなたの質問に文字通り答えると、次のような結果になるかもしれません。

var drinksLinks = $("#drinks a"); // get list of all a tags inside drinks
drinksLinks.each(function() {     // perform function for each element
   var element = $(this);         // get jquery object for the current element
   var id = element.attr("id");   // get the id
   var div = element.find("." + id); // find the element with class matching the id

   $(".sugarcube").clone().appendTo(div);
});

ただし、特定の要素を見つけようとしている場合は、クラスごとに参照することは避けてください。私の提案は、実際には、drinks1 などの div が常に a タグのすぐ隣にあると仮定することです。その後、次のようなことができます。

var sugarcube = $(".sugarcube");
var drinksLinks = $("#drinks a"); // get list of all a tags inside drinks

drinksLinks.each(function() {
   var div = $(this).next();  // get the element next to the a tag
   sugarcube.clone().appendTo(div);
});

覚えておくべきことがいくつかあります。

  • DOM の検索はコストがかかる可能性があるため、セレクターをできるだけ狭くするようにしてください。
  • 古いブラウザではクラスによる検索よりもネイティブに高速であるため、可能であれば id による DOM の検索を試みてください。
  • 同じ要素を複数参照する場合は、sugarcube 要素の場合と同様に変数に格納します。このようにして、結果を達成するために必要なページの検索量を削減します

お役に立てれば！

于 2012-12-07T16:23:19.230 に答える
2

識別子を持つ要素を使用している場合は、「id」の代わりに「class」を使用してください。「id」は一意である必要があります。与えられた例では、diとタグに使用されています。

良い考えではありません！<-申し訳ありませんが、同じ名前のIDが2つあると思いました

これは私のために働いていました。しかし、私はあなたの質問を正しく理解していなかった可能性があります

  $('#drink1').clone().attr('id','drink2').appendTo('#drinks')
于 2012-12-07T16:21:15.293 に答える
1

このようなものはどうですか：

var id = $(this).attr('id');
var targetDiv = $('.' + id);

Int 彼のインスタンス ターゲット div は、その ID に一致するクラス名を持つ div になります。

于 2012-12-07T16:24:01.430 に答える