1

jqueryを使用してタグの周りにブロックをラップする際に問題が発生しています。私が抱えている最大の問題はjqueryセレクターにあると思いますが、jqueryを初めて使用するため、問題がどこにあるのか正確にはわかりません。

私は次のhtmlを持っています

<section class="flexslider shop">
    <ul class="flex-direction-nav">
        <li>
            <a href="#" class="flex-prev">Previous</a>
        </li>
        <li>
            <a href="#" class="flex-next">Next</a>
        </li>
    </ul>
</section>

jqueryを使用して各タグの周りにタグをラップし、既存の2つの間に新しいli要素を挿入する必要があります。jqueryが変更を加えた後の最終結果は次のようになります。

<section class="flexslider shop">
    <ul class="flex-direction-nav">
        <li>
            <i class="icon-circle-arrow-left">
                <a href="#" class="flex-prev">Previous</a>
            </i>
        </li>
        <li>
            <i class="icon-zoom-in">
                <a href="#" id="nav-zoom-in"></a>
            </i>
        </li>
        <li>
            <i class="icon-circle-arrow-right">
                <a href="#" class="flex-next">Next</a>
            </i>
        </li>
    </ul>
</section>

与えられることができるどんな助けでも大いに感謝されます。私は何時間も検索しましたが、この複雑さのjqueryを機能させる方法を理解できませんでした。また、ページが完全に読み込まれると、これらすべてが発生する必要がありますが、それ以外のトリガーはありません。

アップデート

私は今、あなたの何人かの助けを借りてそれを半ば機能させています、これは私がこれまでに持っているものであり、それは正常に機能します、問題はjqueryのセレクターが十分に具体的ではなく、それとしてhtmlを変更することができないことですはjqueryプラグインによって生成されているので、皆さんが助けてくれるこの小さなスクリプトを使用して、事後にそのプラグインを変更しようとしています。これまでのところ、次のようになっています。

問題のスクリプトは、次のhtmlを生成します。

 <ul class="flex-direction-nav">
     <li>
         <a href="#" class="flex-prev">Previous</a>
     </li>
     <li>
         <a href="#" class="flex-next">Next</a>
     </li>
 </ul>

jqueryを介してタグをターゲットにするために、クラスを使用してタグを追加したため、htmlは次のようになります。

<section class="flexslider shop">
    <ul class="flex-direction-nav">
        <li>
            <a href="#" class="flex-prev">Previous</a>
        </li>
        <li>
            <a href="#" class="flex-next">Next</a>
        </li>
    </ul>
</section>

私が現在使用しているjqueryは次のとおりであり、必要に応じて実行されますが、ページに複数のスライダーがあるため、十分に具体的ではありません。

$(window).load(function() {
    $(".flex-direction-nav li:last").before('<li><i class="icon-zoom-in"><a href="#" id="nav-zoom-in"></a></i></li>');
    $(".flex-prev").wrap('<i class="icon-circle-arrow-left" />');
    $(".flex-next").wrap('<i class="icon-circle-arrow-right" />');
});

これにより、適切なhtml出力が生成され、想定どおりに機能しますが、さらに多くのセクションがあるため、セクションclass="flexslidershop"内にあるulclass="flex-direction-nav"を具体的にターゲットにする必要があります。ページ上の複数のulclass= "flex-direction-nav"

4

4 に答える 4

1

<i>まず、タグの使用はお勧めしません。これは、何かではなく、どのように見えるべきかをブラウザに伝えます。セマンティックではなく、プレゼンテーションです。タグ (強調)の方が優れています (セマンティック) が、あなたの場合は、おそらくCSS に追加する必要があります。<i><em>.flexslider li a{font-style: italic}

しかし、ソース コードを変更できないプラグインによって要素が検出されるように、追加のタグが必要であると仮定しましょう。

セクション class="flexslider shop" 内にある ul class="flex-direction-nav" を具体的にターゲットにする必要があります

これにより、例から目的の出力が得られるはずです。

$("section.flexslider.shop ul.flex-direction-nav").each(function(){
  $(".flex-prev", this).wrap('<i class="icon-circle-arrow-left">')
  $(".flex-next", this).wrap('<i class="icon-circle-arrow-right">')
  .before(
    '<li><i class="icon-zoom-in"><a href="#" id="nav-zoom-in"></a></i></li>
  ')
)};

eachセレクターsection.flexslider.shop ul.flex-direction-navが一度だけ照会されるように使用しました。これにより、必要なコードの量が減り、(うまくいけば) パフォーマンスが向上します。this2 番目の引数として jQuery に渡すと、前のセレクターのスコープが制限されます。

section.flexslider.shop ul.flex-direction-nav .flex-prev別の方法として、最初に選択せずにandsection.flexslider.shop ul.flex-direction-nav .flex-nextを 2 つのセレクターとして直接使用することもできますsection.flexslider.shop ul.flex-direction-nav。ただし、必要なコードの量に注意してください。また、あまり具体的でないセレクター (たとえば、.flex-direction-nav ...) で十分であることに注意してください。

于 2013-03-05T07:49:54.977 に答える
0

http://api.jquery.com/insertBefore/＆http://api.jquery.com/insertAfter/を確認し て ください 

$('<li><i class="icon-zoom-in"><a href="#" id="nav-zoom-in"></a></i></li>').insertBefore('.flex-next').parent();

$('<i class="icon-circle-arrow-left">').insertBefore('.flex-prev');

$('</i>').insertAfter('.flex-prev');

$('<i class="icon-circle-arrow-right">').insertBefore('.flex-next');$('</i>').insertAfter('.flex-next');

それはあなたの問題を解決します。

ただし、考慮しなければならないことが1つあります。これは、addClassとremoveClassを使用してこの目標を達成できることです。それはあなたの選択に依存します。これがお役に立てば幸いです。

于 2013-03-05T07:38:32.767 に答える
0

このようなものをお探しですか？

var zoom = $('<li><i class="icon-zoom-in"><a href="#" id="nav-zoom-in"></a></i></li>');

$('.flex-next').wrap('<i class="icon-circle-arrow-right" />');
$('.flex-prev').wrap('<i class="icon-circle-arrow-left" />').parents('li').after(zoom);

ライブデモ

于 2013-03-05T07:41:19.520 に答える
0

このようにしてください：

$(document).ready(function(){
    $(".flexslider .flex-direction-nav li:last").before('<li><i class="icon-zoom-in"><a href="#" id="nav-zoom-in"></a></i></li>');
    $(".flexslider .flex-direction-nav li a.flex-prev").wrap('<i class="icon-circle-arrow-left" />');
    $(".flexslider .flex-direction-nav li a.flex-next").wrap('<i class="icon-circle-arrow-right" />');
});
于 2013-03-05T07:49:45.920 に答える