Question

我的页面上有多个元素。 元素中的数据来自数据库。

这是我的代码。第一种元素

<p><img class="img img-responsive" src="image_url" alt="" width="235" height="41"></p>

具有属性的style元素的第二种类型（此样式也来自数据库）

<p style="text-align: center;">
       <img class="img img-responsive" src="image_url" alt="" width="235" height="41">
</p>

现在，我想向图像添加class center-block，其标签具有这样的样式属性。

我正在用下面的jQuery代码来做到这一点。

<script>
    $( "p" ).find( "img" ).addClass('center-block');
</script>

问题

但是问题是类center-block应用于两个图像。我只想将其应用于第二种元素中的图像。 我该怎么做？

Answer 1

仅在属性中检索具有该样式的段落（从text-align开始）

$( "p[style^='text-align'] img" ).addClass('center-block');

在 VanillaJS 中：

[].forEach.call(document.querySelectorAll("p[style^='text-align'] img"), function(el) {
    el.classList.add('center-block');
})

Demo

Answer 2

您可以使用属性css选择器：

 $('p[style="text-align: center"] img').addClass('center-block');

这仅在整个样式都包含空格的情况下才有效，如果您有其他样式，则可以使用此选择器

'p[style*="text-align: center"] img'

如果您不知道是否有空间，可以使用两个属性选择器：

'p[style*="text-align: center"] img, p[style*="text-align:center"] img'

您还可以编写:style(text-align: center)之类的自定义伪选择器（在JavaScript中），它比较复杂，我认为您的情况不需要它。

此外，正如您在我的代码中看到的那样，没有发现，因为您不需要它，因此可以有一个选择器。

Answer 3

{{1}}

这将检查每个p元素以及样式中包含text-align的元素：center它将设置其子图像以包括center-block类

Answer 4

您应该使用过滤器功能

$( "li" )
  .filter(function( index ) {
    return $( this ).attr( "style" ) === "text-align: center";
  })
    .addClass('center-block');

Answer 5

只需选择检查css属性text-align来匹配您提供的属性，下面是一个有效的代码段：

$( document ).ready(function() {
    $( "p[style='text-align: center;']" ).find( "img" ).addClass('center-block');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><img class="img img-responsive" src="https://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" alt="" width="235" height="41"></p>
<p style="text-align: center;">

<img class="img img-responsive" src="https://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" alt="" width="235" height="41">
</p>

Answer 6

我认为足以找到所有具有样式属性的p

<script>
    $( "p[style] img" ).addClass('center-block');
</script>

使用jQuery在p内使用特定类查找图像标签

6 个答案: