1

私が持っているHTMLは次のようなものです。

<div id="container">
  <ul>
    <li>
        <div class="oneClass">
            <img src="http:image.jpg">
        </div>
        <div class="anotherClass" id="oneID">
            <div class="twoClass" id="randomID">
                <cite class="user">
                    <a href="http://someURL" >Name</a>
                </cite>
                <span class="icon user"></span>
                <span class="threeClass">
                    <a href="http:URL#oneID">some text</a>
                </span>
            </div>
            <p class="content" id="randomID">some words content</p>
        </div>
    </li>
    <li>
        <div class="oneClass">
            <img src="http:image.jpg">
        </div>
        <div class="anotherClass" id="anotherID">
            <div class="twoClass" id="randomID">
                <cite class="user">
                    <a href="http://someURL" >Name</a>
                </cite>
                <span class="icon user"></span>
                <span class="threeClass">
                    <a href="http:URL#anotherID">some text</a>
                </span>
            </div>
            <p class="content" id="randomID">some words content</p>
        </div>
    </li>
  </ul>
</div>

私が必要としているのは、oneClassの次のIDを検出し、oneClassの周りに別のdivを作成するために使用する方法を見つけることです。例：

    <div id="container">
       <ul>
        <li> 
      <div id="myName_oneID">
            <div class="oneClass">
         <img src="http:image.jpg">
            </div>
      </div>
         <div class="anotherClass" id="oneID">
            <div class="twoClass" id="randomID">
                <cite class="user">
               <a href="http://someURL" >Name</a>
                 </cite>
                    <span class="threeClass">
                         <a href="http:URL#oneID">some text</a>
                    </span>
              </div>
                <p class="content" id="randomID">
                   some words content
                </p>
        </div>
     </li>
      <li>
        <div id="myName_anotherID">
             <div class="oneClass">
                <img src="http:image.jpg">
             </div>
         </div>
             <div class="anotherClass" id="anotherID">
                 <div class="twoClass" id="randomID">
                     <cite class="user">
                    <a href="http://someURL" >Name</a>
                      </cite>
                     <span class="threeClass">
                    <a href="http:URL#anotherID">some text</a>
                     </span>
                 </div>
             <p class="content" id="randomID">
                   some words content
             </p>
          </div>
     </li>
    </ul>
</div>

私は次のようにアンカーからそれを取得しようとしました：

    $(".threeClass a").map(function () {
    var myID ="myName_" + this.hash.replace(/#/, '');
    //alert(myID);
$(".oneClass").each(function () {
    $(this).wrap("<div id='" + myID + "' />");
});

});

alert（myID）をテストすると正しく検出されますが、これを使用して新しいdivをラップしようとすると、すべてのoneClassに対して同じIDで作成されます。

できますか？

私はjavascriptまたはJqueryの初心者であり、正しい方法でヘルプまたはガイダンスを理解しています。

ありがとうございました。

4

1 に答える 1

2

これを試して

$('.oneClass').each(function(){
    id=$(this).next().attr('id');
    $(this).wrap('<div></div>').parent().attr('id', 'myName_'+id);
});

デモ（ソースを参照）。

于 2012-08-02T00:27:21.210 に答える