0

私は以下のコードを持っています:

<div class="content">
    <h2>Choose a category</h2>
    <ul class="clean menu" id="topics">
        <li class="drop png">
            <a cat="ntech" class="sec_accnt" href="javascript:void(0);" name="&amp;lid=choose_category_billing" rel="1" style="BACKGROUND-POSITION: 13px -164px">Billing</a>
        </li>
       <li class="drop png">
            <a cat="tech" class="sec_homecontrol" href="javascript:void(0);" name="&amp;lid=choose_category_homecontrol" rel="1" style="BACKGROUND-POSITION: 13px -121px">Home Monitoring &amp; Control</a>
       </li>
        <li class="drop png">
            <a cat="ntech" class="sec_regis" href="javascript:void(0);" name="&amp;lid=choose_category_regis_signin" rel="1" style="BACKGROUND-POSITION: 13px -207px">Registration &amp; Sign In</a>
        </li>
    </ul>
 </div>

ここで、2 番目のリストに新しい li を追加したいと思いました。アドイン後、コードは次のようになります。

<div class="content">
    <h2>Choose a category</h2>
    <ul class="clean menu" id="topics">
        <li class="drop png">
            <a cat="ntech" class="sec_accnt" href="javascript:void(0);" name="&amp;lid=choose_category_billing" rel="1" style="BACKGROUND-POSITION: 13px -164px">Billing</a>
        </li>


        <li class="drop png">
            <a cat="tech" class="sec_net_1" href="javascript:void(0);" name="&amp;lid=choose_category_internet_fios" rel="1">FiOS Internet</a>
        </li>    <!-- Newly added li -->


       <li class="drop png">
            <a cat="tech" class="sec_homecontrol" href="javascript:void(0);" name="&amp;lid=choose_category_homecontrol" rel="1" style="BACKGROUND-POSITION: 13px -121px">Home Monitoring &amp; Control</a>
       </li>
        <li class="drop png">
            <a cat="ntech" class="sec_regis" href="javascript:void(0);" name="&amp;lid=choose_category_regis_signin" rel="1" style="BACKGROUND-POSITION: 13px -207px">Registration &amp; Sign In</a>
        </li>
    </ul>
 </div>

mootools を使用してこれをどのように達成できますか? 私はmootools 1.3.2を使用しています。以下の行を使用しました：

 $("#topics").bind('<li class="drop png"><a cat="tech" class="sec_net_1" href="javascript:void(0);" name="&amp;lid=choose_category_internet_fios" rel="1">FiOS Internet</a></li>');

しかし、これはエラーを出しています'null' is null or not an object。

4

3 に答える 3

0

$("#topics")である必要があります$("topics")。

var el = new Element('li', {
    class: "drop png",
    html: "FiOS Internet" // ... you may add other attributes
});
$('topics').grab(el);

私は実際にmootoolsを知りませんが、それを使用したい場合は、ドキュメントをもっと注意深く読む必要があります：http: //mootools.net/docs/core。

于 2013-03-11T06:54:59.743 に答える
0

Element.inject()を探しています。

このようなものでうまくいくはずです（何をすべきかをよりよく指摘するために、いくらか単純化しました）：

var li = new Element('li'), 
    a = new Element('a'), 
    span = new Element('span', {'text': 'FiOS Internet'});
span.inject(a);
a.inject(li);
li.inject($('x1'),'after');

順序を正しくするためにid、li項目を指定したり、同様の方法でマークしたりすることに注意してください。これは必須ではありませんが、理解しやすくなります。

この例では、最初のアイテムを次のようにマークしました。

<li id='x1' class="drop png">
    ....
</li>

JSFiddle: http://jsfiddle.net/tvc3n/

于 2013-03-11T07:09:10.127 に答える
0

これはそれを行う必要があります：

var newLi = new Element('li.drop.png', {
    html: '<a cat="tech" class="sec_net_1" href="javascript:void(0);" name="&amp;lid=choose_category_internet_fios" rel="1">FiOS Internet</a>'
});
$('topics').getElement('li').grab(newLi, 'after');

http://jsfiddle.net/ZB3cF/1/

于 2013-03-11T07:11:35.547 に答える