dongqindan4406 2013-01-24 10:48
浏览 317
已采纳

使用jQuery / javascript从HTML中删除id属性

I have a mainWrap inside which content is populated dynamically.(It is somewhat like below)

          <div id="mainWrap">
                <div style="z-index: 1001; height: 407px; width: 328px; top: 150px; left: 601.5px;" id="com-TMRJDOR2KOET3X6JPV6XGU0FB7RGJ926" class="textBox contentBox">
                   <div style="" class="editable"><p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, </p>
                   </div>
                </div>

                <div style="z-index: 1002; height: 616px; width: 288px; top: 29px; left: 3.5px;" id="com-UPWTMKZ7OUTN8KG2JEK47LNPN5JO261H" class="textBox contentBox">
                   <div style="" class="editable"><p>
                ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
                  </div>
               </div>            
          </div>

The immediate children of mainWrap have an id attached to them.I want to remove the ids before I save it to the database.Now I have tried something like this

        var getContent = $('#mainWrap');  
        var finalContent =getContent.clone().find('*').removeAttr('id');// 1            
        var finalContent=getContent.clone().children().removeAttr('id');//2     
        alert(finalContent.html());

In both the cases I get the output as follows:

        <div style="" class="editable"><p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, </p>
        </div>

The outer div is removed and instead of two I get only 1 div. But When I tried it out independently it works with the 2nd one.Here's the fiddle

How can I get it right.I am not sure why its failing in the application and working independently!
Thank you for the time

  • 写回答

5条回答 默认 最新

  • dsjklb0205 2013-01-24 10:56
    关注

    Try be more specific in parents selection .

    Try this:

    $(document).ready(function () {
        var getContent = $('#mainWrap');
        var finalContent = $('div.textBox', getContent).clone();
    
        finalContent.each(function () {
            $(this).removeAttr('id');
        });
        console.log(finalContent[0]);
    });
    

    See it here http://jsbin.com/ewosix/1/

     $('button').click(function () {
         var newContent = $(finalContent).first().wrap('<div class="addId" />');
         newContent = $(newContent).parents( /*You can add specific selector for parents like div.textBox or leave it emty for all parents */ ).each(function (index, value) {
             $(this).attr('id', index);
         });
         alert($(newContent).html());
     });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?