Question

我正在尝试编写一个jQuery脚本，该脚本将div附加到包含特定背景图片的div。

我尝试使用每个div查找包含该特定URL的页面中的每个div，然后将其隐藏并替换为div，但是它不起作用。

<div style="background-image:url('images/image.jpg');">first div</div>
<div style="background-image:url('images/image2.jpg');>second div</div>

var test = '<div>test</div>';

$('div').each(function() {
    if ($(this).css("background-image", "url('images/image.jpg')")) {
        $(this).hide().append(test);
    };
});

我希望第一个div消失并显示test一词，而第二个div会继续显示，但我得到的只是一个空白页。

Answer 1

首先，您的第二个div缺少右引号，因此不是有效的语法。
接下来，当您将两个参数传递给JQuery .css()方法时，您将正在设置相关CSS属性的值。就你而言您想要获得该值，因此只传递一个参数，即名称要获取的CSS属性。
此外，当附加到元素时，会将新内容作为子元素放置在附加到元素中。因此，如果隐藏该元素，则看不到附加内容。而是使用.after()方法，将新内容作为同级（而不是子级）放置在第一个之后，以确保您看到该项目。

因此，如果我们纠正这些问题：

var test = '<div>test</div>';

$('div').each(function() {
  // Test the returned value of the .css() call to
  // see if it contains the path of the desired image:
  if ($(this).css("background-image").indexOf('images/image1.jpg') > -1) {
    $(this).hide().after(test);
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background-image:url('images/image1.jpg');">first div</div>
<div style="background-image:url('images/image2.jpg');">second div</div>
<div style="background-image:url('images/image1.jpg');">third div</div>

但是，如果您只是避免使用内联样式并使用CSS类，那么您的解决方案就是两行JavaScript。查看内嵌评论。

var test = '<div>test</div>';

// Simply set up your JQuery selector to find only those
// elements that match the class you want to work with
$("div.background1").hide().after(test);

/* Set up classses and use as necessary */
.background1 { background-image:url('images/image1.jpg'); }
.background2 { background-image:url('images/image2.jpg'); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Avoid inline styles and use CSS classes instead.
     They are more flexible and eliminate repeated code. -->
<div class="background1">first div</div>
<div class="background2">second div</div>
<div class="background1">third div</div>

Answer 2

不同的方法

var test = '<div>test</div>';
$('.one').hide().after(test);

.one {
  background-image:url('images/image.jpg');
}

.two {
  background-image:url('images/image2.jpg');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="one">first div</div>
<div class="two">second div</div>

根据背景图片分配JQuery选择器

2 个答案: