需求分析

这个问题怎么描述呢,具体情况是这样的:

<div>
  <div>
    <p></p>
  </div>
  <div>
    <img>
  </div>
  <div>
    <span></span>
  </div>
</div>

有这样一个标签结构,并且这个结构是由vue的v-html动态加载的,只有标签名,没有class属性,我们需要选中其中一个div元素,并且这个div的子元素中包含img元素。

尝试解决

开始打算直接用CSS来实现,查了MDN,发现有一个:has的伪类,不过很遗憾,现在没有任何浏览器支持,详细文档移步:官方文档

选择包含特定子元素的父元素:has-1

于是放弃了纯CSS的解决办法,如果你有好的办法,不如在留言区告诉我~~

jquery解决

首先解决的一个问题就在我的Nuxt项目中引入jquery

1.安装

npm install --save jquery

2.引入

<script>
import $ from 'jquery'
export default {
  mounted () {
    // jq代码写在mounted 里面
    $(function () {
    
    })
  }
}
</script>

jQuery :has() 选择器

官方api文档

可以通过一个例子,来看看怎么实现

选取所有包含有 <span> 元素在其内的 <p> 元素:

$("p:has(span)")

:has() 选择器选取所有包含一个或多个元素在其内的元素,匹配指定的选择器。

语法
$(":has(*selector*)")
参数描述
selector必需。规定要选取的元素。 该参数接受任何类型的选择器。
设置样式

通过:has选择了特定的元素,就可以通过.css设置其样式,具体代码如下:

$("p:has(span)").css("border","solid red");

其中,CSS中,第一个参数的属性名,第二个参数是属性值;

为了做具体的范围限定,比如说我只需要选择在某个范围内满足条件的p标签,也可以在:has前面加上限定,例如:

$(".article-appreciate-box p:has(span)").css("border","solid red");

当然,你要是想设置一堆的样式,也可以使用对象的方法传入,例如:

    $(".article-appreciate-box p:has(span)").css({
      color: 'yellow',
      border:'red solid'
    });

选择包含特定子元素的父元素:has-2

vue和jQuery 冲突

某些情况下这两者会冲突,vue官方也不推荐在一起使用,那咋办呢,找到一个办法,先执行vue再执行jq

$(document).ready(function () {
    //先执行vue
    var app = new Vue({
        el: '#app',
        data: {
        hello: 'Hello Vue',
        zxmbList: zxmbList,
        zxmpfbzbList: zxmpfbzbList,
    }
  $(function () {})
    //再jQ
}) 
如果觉得我的文章对你有用,请随意赞赏