0

ボタンの 1 つをクリックすると<p>s、カプセル化された div 内のすべてに黄色の背景が表示されます。理想的には、jquery セレクターの要素セレクターと一致する
ものを見たいと思います。更新: 申し訳ありませんが、私の要求を明確にしませんでした。 親divのセレクター、親で選択したい要素、およびselect句のすべてを確認したいと思います。から要素 を取得したい場合、次のようにセレクター句を拡張できます - Gets all in私の場合、この「is」ボタンを使用して を取得したいと思います。次の行にある必要があります$(this)parent
$(this)
<p>.left div
$("p", ".left")<p>.left
.left$(this)
$("p", $(this).closest("body > div"))

jsFiddle
コードを次に示します。 

    <style>
    div p.painted {
        background-color: #FF0;
    }
    </style>
    <div class="left">
        <div class="actions">
            <div class="ui">
                <div class="colors">
                    <button class="paint">Paint it yellow!</button>
                </div>
            </div>
        </div>
        <p>
            Lorem Ipsum 
        </p>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </div>
    <div class="right">
        <div class="actions">
            <div class="ui">
                <div class="colors">
                    <button class="paint">Paint it yellow!</button>
                </div>
            </div>
        </div>
        <p>
            Lorem Ipsum 
        </p>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </div>

    <script>
    $(function(){
        $(".paint").click(PaintIt);
    });

    function PaintIt(){
        $(this).closest("p").addClass("painted");
    }
    </script>
4

3 に答える 3

4

selected all の代わりにsiblings()を使用できます<p>s。これが更新されたfiddleです。

于 2013-05-06T02:16:44.320 に答える
1

closestマークアップに従って、選択した要素の最も近い親を選択します。最初に親要素を選択してから、段落要素を選択/検索する必要があります。

$(this).closest("div").siblings('p').addClass("painted");

また：

$(this.parentNode).siblings('p').toggleClass("painted");

また：

$(this.parentNode).closest('div').find('p').toggleClass("painted");

http://jsfiddle.net/nKPFv/

于 2013-05-06T02:08:29.180 に答える
0

実際、これは機能 $("p", $(this).closest("body > div"))
します。テスト中になぜ機能しなかったのかわかりません!

更新されたjsFiddle

于 2013-05-06T21:51:09.047 に答える