如果类匹配，jQuery移动块元素 [英] jQuery move blocks element if class match

问题描述

类不会被固定，因此需要找到与div和ul相同的唯一2类，并使用wrap li将div移到ul内.最后，当全部完成后，在ul

class won't be fixed so need to find same unique 2 class with div and ul and move div inside ul with wrap li. at last when all done then add new addclass on ul

检查屏幕快照我的当前状况- https://驱动器. google.com/file/d/0B-aBOQ69HXqbWVhLTWhzWHFoQlE/view?usp=sharing

check screenshot my current situation - https://drive.google.com/file/d/0B-aBOQ69HXqbWVhLTWhzWHFoQlE/view?usp=sharing

这些菜单存在于html

   

<div class="nav1">
<ul>
  <li>menu a</li>
  <li>menu a</li> 
</ul>
</div>


<div class="nav2">
<ul>
  <li>menu a</li>
  <li>menu a</li> 
</ul>
</div>

**these block will be add somewhere else**

 
<div class="nav1"><img src="img"  /></div>

<div class="nav2"><img src="img"  /></div>

最终输出.

   

<div class="nav1 newfixedclass">
<ul>
  <li>menu a</li>
  <li>menu a</li> 
 <li><div class="nav1"><img src="img"  /></div></li> 
</ul>
</div>


<div class="nav2 newfixedclass">
<ul>
  <li>menu a</li>
  <li>menu a</li> 
  <li><div class="nav2"><img src="img"  /></div></li> 
</ul>
</div>

  <nav class="navigation">
    <ul>
     <li class="nav-women">
        <a class="level-top" href="women"><span>women</span></a>
        <ul class="level0">
          <li class="nav-features">
            <a href="women/features"><span>FEATURES</span></a>
            <ul class="level1">
              <li class="nav-new-arrivals">
                <a href="women/features/new-arrivals"><span>New Arrivals<span></a>
              </li>
          	</ul>
          </li>
          <li class="nav-categories">
            <a href="women/categories"><span>CATEGORIES</span></a>
            <ul class="level1">
              <li class="nav-sweaters">
                <a href="#"><span>Sweaters</span></a>
              </li>            
            </ul>
          </li>
        </ul>
      </li>
      <li class="nav-mens">
        <a class="level-top" href="mens"><span>mens</span></a>
        <ul class="level0">
          <li class="nav-features">
            <a href="mens/features"><span>FEATURES</span></a>
            <ul class="level1 submenu sub0">
              <li class="nav-new-arrivals">
                <a href="mens/features/new-arrivals"><span>New Arrivals</span></a>
              </li>
                         </ul>
          </li>
          <li class="nav-categories">
            <a href="mens/categories"><span>CATEGORIES</span></a>
            <ul class="level1">
              <li class="nav-bags">
                <a href="mens/categories/bags"><span>Bags</span></a>
              </li>
              <li class="nav-blazers">
                <a href="mens/categories/blazers"><span>Blazers</span></a>
              </li>
              <li class="nav-ties">
                <a href="mens/categories/ties"><span>Ties</span></a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
 </nav>
  
  
  <div class="nav-women"><img src="http://images.apple.com/v/home/ct/images/promos/public_betas_medium.jpg"></div>
 <div class="nav-mens"><img src="http://images.apple.com/v/home/ct/images/promos/public_betas_medium.jpg"></div>

推荐答案

在这里，根据我对脚本查询的理解和解决方案，将HTML放入了脚本中.

Here i have put your HTML as per my understanding and solution of your query in script.

<div class="nav1">
    <ul>
        <li>menu 11</li>
        <li>menu 22</li>
    </ul>
</div>


<div class="nav2">
    <ul>
        <li>menu 33</li>
        <li>menu 44</li>
    </ul>
</div>

<div class="nav1"><img src="~/Images/bullet.png" /></div>
<div class="nav2"><img src="~/Images/bullet.png" /></div>

<script>
    $(document).ready(function () {
        $("div[class^='nav'] img").each(function (a, b) {                
            var imgTag = $(this).closest("div[class^='nav']").clone(true);
            var parentDivClass = imgTag.attr("class");
            $(this).closest("div[class^='nav']").remove();

            var newHtml = "<li>" + imgTag[0].outerHTML + "</li>";
            $("div[class^=" + parentDivClass + "] ul:first").append(newHtml);
            $("div[class^=" + parentDivClass + "]:first").addClass("newfixedclass");
        }); 
    });
</script>

这篇关于如果类匹配，jQuery移动块元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！