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')一個單獨的背景圖片