Jquery DOM操作高级选择

时间:2017-06-06 11:32:35

标签: javascript jquery html jquery-selectors

我正在使用某种电子商店模板,我只能使用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>

1 个答案:

答案 0 :(得分:0)

您可以添加额外的课程并检查该课程,而不是检查文字。或者您可以为第一个$('.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>