Jquery DOM操作高级选择

Question

我正在使用某种电子商店模板，我只能用Jquery和JS操作一些东西。

问题1：

我想给第一个包含内容“Hello and Welcome！”的方框。和一些背景 - 图像。问题是，这个框有一些填充，我需要将背景设置为此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

您可以添加额外的类并检查该类，而不是检查文本。或者您可以为第一个$('.content-box')中的.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>