jQuery - 関数呼び出し元と同じdivで関数を実行

Question

jQuery（およびjavascript）は本当に新しいです。 私は2つの重複した "エディタ"を持っており、関数呼び出し元と同じdivに含まれる段落に対して関数を実行したい。

私は段落を見つけるのにclosestメソッドを使用していますが、それが最良の解決策であるかどうかはわかりません。要素のインデックスで何かをする方が良いでしょうか？

また、私は横断されたDOMの量を減らすためにセレクタにコンテキストを与えたいと思います。

マークアップの簡易版：

<div id="wrapper1"> 
    <div> 
    <p class="paragraph">This is text of box #1</p> 
    </div> 
    <div> 
    <div> 
     <a href="#" class="doBold">Bold</a> 
     <a href="#" class="doItalic">Italic</a> 
    </div> 
    </div> 
</div> 

<div id="wrapper2"> 
    <div> 
    <p class="paragraph">This is text of box #2</p> 
    </div> 
    <div> 
    <div> 
     <a href="#" class="doBold">Bold</a> 
     <a href="#" class="doItalic">Italic</a> 
    </div> 
    </div> 
</div> 

のjQueryの単純化されたバージョン：

$(document).ready(function($){ 

    var methods = { 
    doBold: function() { $(this).closest(':has(.paragraph)').toggleClass('bold') }, 
    doItalic: function() { $(this).closest(':has(.paragraph)').toggleClass('italic') }, 
    } 

    $('.doBold').click(methods.doBold); 
    $('.doItalic').click(methods.doItalic); 
    }); 

Answer 1

はこれを試します段落のみのクラス：

$(document).ready(function($) { 
    var methods = { 
     doBold: function(obj) { 
      $(obj).closest(":has('.paragraph')").find('.paragraph').toggleClass('bold'); 
     }, 
     doItalic: function(obj) { 
      $(obj).closest(":has('.paragraph')").find('.paragraph').toggleClass('italic'); 
     }, 
    } 
    $('.doBold').click(function() { 
     methods.doBold(this) 
    }); 
    $('.doItalic').click(function() { 
     methods.doItalic(this) 
    }); 
}); 

Answer 2

あなたが探している単語である "この"

$('doBold').click(function(){ 
    $(this).parents('.paragraph').toggleClass('bold'); 
} 

Answer 3

この 私が変更したかもしれない唯一のことは、IDを編集に与えることですそれが適用解決（あなたがしようとしたこと）

$(document).ready(function($) { 
    var methods = { 
     doBold: function(obj) { 
      $(obj).closest(":has('.paragraph')").toggleClass('bold'); 
     }, 
     doItalic: function(obj) { 
      $(obj).closest(":has('.paragraph')").toggleClass('italic'); 
     }, 
    } 
    $('.doBold').click(function() { 
     methods.doBold(this) 
    }); 
    $('.doItalic').click(function() { 
     methods.doItalic(this) 
    }); 
}); 

1以上：

$(document).ready(function($) { 
    var methods = { 
     doBold: function(obj) { 
      $(obj).parents("div[id*='wrapper']").find('.paragraph').toggleClass('bold'); 
     }, 
     doItalic: function(obj) { 
      $(obj).parents("div[id*='wrapper']").find('.paragraph').toggleClass('italic'); 
     }, 
    } 
    $('.doBold').click(function() { 
     methods.doBold(this) 
    }); 
    $('.doItalic').click(function() { 
     methods.doItalic(this) 
    }); 
}); 

別ソリューション：ORS（Editor1、Editor2）段落、およびそれらを参照DIRECTRY $("#Editor1")... または$(this).closest('p')...