如果类匹配,jQuery移动块元素

时间:2016-08-12 04:41:08

标签: jquery

类将不会被修复,因此需要使用div和ul找到相同的唯一2类,并使用wrap li将div移到ul内。最后完成所有操作然后在ul

上添加新的addclass

检查截图我当前的情况 - 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>

2 个答案:

答案 0 :(得分:0)

你可以这样做,

$("div[class^=nav]:has(ul)").each(function(){
 $("ul", this)
    .append($("<li>")
       .append($("div."+ this.className + ":has(img) img")))
          .closest("div").addClass("newClassFixed");
});

DEMO

是的,你可以直接移动div,

$("div[class^=nav]:has(ul)").each(function(){
 $("ul", this)
    .append($("<li>")
       .append($("div."+ this.className + ":has(img)")))
          .closest("div").addClass("newClassFixed");
});

DEMO

答案 1 :(得分:0)

在这里,我根据我对脚本中查询的理解和解决方案来放置HTML。

<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>