Question

我有一个HTML脚本

<p> some content </p>
<p> <img src="img.jpg"/>
<p> some text content </p>

现在，我要做的是更改其中内容图片的段落宽度，但其他段落的文本内容将保持不变。

在我们的案例中说：

包含text : width=80%

的段落

包含image : width = 100%

的段落

我可以通过jQuery实现这一目标吗？

我尝试了一些选择器:has和其他一些选择器，但似乎没有任何效果。

Answer 1

您可以使用:has选择器：

 $('p:has("img")').css('width','100%');

Answer 2

您可以使用jQuery中的parents函数遍历DOM。

$( 'p' ).css( 'width', '80%' );
$( 'img' ).parents( 'p' ).css( 'width', '100%' );

Answer 3

这可以在纯JavaScript中轻松实现：只处理所有p元素，检查元素是否包含任何img元素，如果不包含，则设置其宽度。因此，除非您有特殊原因（如编码的一致性）才能使用jQuery，您可以按照以下方式执行此操作：

window.onload = function() {
  var p = document.getElementsByTagName('p');
  for(var i = 0; i < p.length; i++) {
    if(p[i].getElementsByTagName('img').length == 0) {
      p[i].style.width = '80%';
    }
  }
}

p { outline: solid red } /* Just to show the widths */

<p> some content </p>
<p> <img src="img.jpg"/>
<p> some text content </p>

Answer 4

您可以使用JQuery选择段落中的图像节点，一旦获得该对象，只需询问其父节点

根据其内容选择p标签

4 个答案: