我正在嘗試向 div 添加一個新類,該類直接位于包含特定文本的 div 之后。我已經能夠使用我在下面組合在一起的 JQuery 成功地向包含特定文本的 div 添加一個類,但未能成功地將該類應用到下一個。
<div class="col-xs-12">
<div class="content-holder">Heading<p></p></div>
<div class="content-paragraph content-holder"><p>Sub heading</p></div>
<div class="content-paragraph content-holder"><p>Lorum Ipsum</p></div>
<div class="content-paragraph content-holder"><p>This is what I would like to target</p></div>
<div class="content-paragraph content-holder"><p>Date here</p></div>
<div class="content-paragraph content-holder"><p>Etiam tincidunt ac enim id ultrices. Phasellus odio lectus, luctus at vehicula nec, tempus non odio. Vestibulum consequat vitae leo eget molestie. Nulla tristique nisl ac auctor placerat. Donec eu velit dui. </p></div>
</div>
查詢:
$(document).ready(function() {
$("p:contains(Lorum Ipsum)").addClass("found");
$("p:contains(Lorum Ipsum)").next('.content-paragraph').addClass("located");
});
我想要實作的目標(找到的類應用正確):
<div class="content-paragraph content-holder"><p class="found">Lorum Ipsum</p></div>
<div class="content-paragraph content-holder"><p class="located">This is what I would like to target</p></div>
我仍然在學習的程序中,如果能幫助我朝著正確的方向前進,我將不勝感激。
提前致謝。
uj5u.com熱心網友回復:
當您選擇段落,它有沒有兄弟姐妹,所以.next()會null。考慮以父級為目標。
$(function() {
$("p:contains(Lorum Ipsum)")
.addClass("found")
.parent().next('.content-paragraph')
.addClass("located");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-12">
<div class="content-holder">Heading
<p></p>
</div>
<div class="content-paragraph content-holder">
<p>Sub heading</p>
</div>
<div class="content-paragraph content-holder">
<p>Lorum Ipsum</p>
</div>
<div class="content-paragraph content-holder">
<p>This is what I would like to target</p>
</div>
<div class="content-paragraph content-holder">
<p>Date here</p>
</div>
<div class="content-paragraph content-holder">
<p>Etiam tincidunt ac enim id ultrices. Phasellus odio lectus, luctus at vehicula nec, tempus non odio. Vestibulum consequat vitae leo eget molestie. Nulla tristique nisl ac auctor placerat. Donec eu velit dui. </p>
</div>
</div>
uj5u.com熱心網友回復:
不太確定這是否是最有效的方法,但我確實想出了一個解決方案。
$(document).ready(function() {
$("p:contains(Lorum Ipsum)").parent().addClass("found");
$(".found").next().addClass("located");
});
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/358725.html
