jQuery的DOM操作高级选择

Question

我需要一些帮助的jQuery：

我有某种网上商店模板的工作，我只能操作一些东西用jQuery和JS。

我想给内容“你好，欢迎！”的第一个框。一些背景图像。问题是，这个盒子有一些填充，我需要将背景设置为这个Div的父“内部包装”。

有没有办法选择第一个“内包装”，并检查内容是“你好，欢迎！”在内容框中？

---

问题2：方框1 - 方框4需要另一个背景图像。

我知道一些基本的jquery的东西，但我与那些先进的东西斗争。经过4小时的试验和错误，我必须问你们。

我希望你能帮助我，并提前致谢！

<div class="row"> 
 

 
    <div class="inner-wrapper"> 
 
      <div class="content-box"> 
 

 
       Hello and Welcome! 
 

 
      </div> 
 
    </div> 
 
    <div class="inner-wrapper"> 
 
      <div class="content-box"> 
 

 
       <img src="" alt=""> 
 

 
      </div> 
 
    </div> 
 

 
</div> 
 

 
<div class="row"> 
 
    <div class="inner-wrapper"> 
 
     <div class="content-box"> 
 

 
      Box 1 
 

 
     </div> 
 
    </div> 
 
    <div class="inner-wrapper"> 
 
     <div class="content-box"> 
 

 
      Box 2 
 

 
     </div> 
 
    </div> 
 
    <div class="inner-wrapper"> 
 
     <div class="content-box"> 
 

 
      Box 3 
 

 
     </div> 
 
    </div> 
 
    <div class="inner-wrapper"> 
 
     <div class="content-box"> 
 

 
      Box 4 
 

 
     </div> 
 
    </div> 
 

 
</div>

Answer 1

而不是检查的文字，你可以添加一个额外的类，并检查有无类或者你可以给里面的第一.inner-wrapper

$(function(){ 
 
    $('.content-box').each(function(){ 
 
    if($(this).hasClass('firstBox')){ 
 
     
 
     $(this).parent().css('background-image', 'url(http://via.placeholder.com/350x150)'); 
 
    }else{ 
 
    $(this).parent().css('background-image', 'url(http://via.placeholder.com/150x150)'); 
 
    } 
 
    }) 
 
})

.inner-wrapper{ 
 
    width:100px; 
 
    height:100px; 
 
    background-size: cover; 
 
    border:1px solid #ddd; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 

 
    <div class="inner-wrapper"> 
 
      <div class="content-box firstBox"> 
 

 
       Hello and Welcome! 
 

 
      </div> 
 
    </div> 
 
    <div class="inner-wrapper"> 
 
      <div class="content-box"> 
 

 
       <img src="" alt=""> 
 

 
      </div> 
 
    </div> 
 

 
</div> 
 

 
<div class="row"> 
 
    <div class="inner-wrapper"> 
 
     <div class="content-box"> 
 

 
      Box 1 
 

 
     </div> 
 
    </div> 
 
    <div class="inner-wrapper"> 
 
     <div class="content-box"> 
 

 
      Box 2 
 

 
     </div> 
 
    </div> 
 
    <div class="inner-wrapper"> 
 
     <div class="content-box"> 
 

 
      Box 3 
 

 
     </div> 
 
    </div> 
 
    <div class="inner-wrapper"> 
 
     <div class="content-box"> 
 

 
      Box 4 
 

 
     </div> 
 
    </div> 
 

 
</div>

为 $('.content-box')一个单独的背景图片