Question

<template
    slot="headers"
    slot-scope="props"
>
    <tr>
        <th
            v-for="header in props.headers"
            :key="header.text"
            align="left"
            :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
              @click="changeSort(header.value)"
            >
              <VIcon small>
                arrow_upward
              </VIcon>
              {{ header.text }}
        </th>
    </tr>
    <tr>
        <th
            v-for="header in props.headers"
            v-show="header.filterable === 'true'"
            :key="header.text"
        >
            <VTextField
                :label="header.text"
                box
            />
        </th>
    </tr>
</template>

我有上面的html序列。唯一的线索是带有文本“ repeatedtext”链接的h2

我要选择显示为“选择此元素”的所有元素，该元素在h2后跟着p

如何在jquery中做到这一点。

Answer 1

使用https://jsfiddle.net/8mpxev0u/选择器选择具有特殊文本的元素，然后使用:contains()选择下一个p元素

$("h2 > a:contains('repeatedtext')").parent().next("p").next().css("color", "red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>
 <a href="exmpale">repeatedtext</a>
</h2>
<p>text</p>
<p>required things</p>

Answer 2

您可以使用h2:contains(repeatedtext) + p + p作为选择器

$('h2:contains(repeatedtext) + p + p').css('color', 'green');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>
 <a href="exmpale">repeatedtext</a>
</h2>
<p>
</p>
<p> required things    </p>   
<h2>
 <a href="exmpale">not repeated</a>
</h2>
<p>
</p>
<p> not required things    </p>   
<h2>
 <a href="exmpale">repeatedtext</a>
</h2>
<p>
</p>
<p> required things    </p>

jQuery选择器：如何选择元素

2 个答案: