选择包含特定子元素的父元素—jquery:has

需求分析

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

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

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

尝试解决

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

于是放弃了纯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*)")

设置样式

通过: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'
    });

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
})