使用 jQuery 修剪文本

Question

就我而言，我有很多这样的文字：

(name price currency * quantity)

Blue Book 5 $ * 100

Green Books 34 Uk * 50

和...

这是我的 html 和 jQuery 代码。

 jQuery('td.quantity_col dd.variation- p').text(function(_, curr) { //jQuery('p.time').text('Time of match') return curr.split('*').pop().trim(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <table class="woocommerce"> <tr> <td class="tdclass quantity_col"> <dl class="variation"> <dd class="variation-"><p class="time">Blue Book 5 $ * 100</p></dd> </dl> </td> </tr> <tr> <td class="tdclass quantity_col"> <dl class="variation"> <dd class="variation-"><p>green Books 34 Uk * 50</p></dd> </dl> </td> </tr> </tbody> </table>

我想修剪如下文本：

Blue Book 5 $ * 100  --->  Blue Book

Green Books 34 Uk * 50 ---> Green Books

jquery 的任何解决方案？

Answer 1

你可以这样做，但我不得不说你的代码很乱。 在尝试与 DOM 交互之前，您应该对其进行一些清理。

 $(document).ready(function() { $('td.quantity_col dl dd.variation- p').each(function(i,x) { if (i%3 == 1) { console.log($(this).text().split(/\d/)[0].trim()) $(this).text($(this).text().split(/\d/)[0].trim()) } }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="woocommerce"> <tbody> <tr> <td class="tdclass">#1</td> <td class="tdclass"><span class="other_item">wallet</span></td> <td class="tdclass">$45</td> </tr> <tr> <td class="tdclass">#2</td> <td class="tdclass quantity_col"> <dl class="variation"> <dt class="variation-">Select Category:</dt> <dd class="variation-"><p>Category 1</p></dd> <dt class="variation-">Select Product:</dt> <dd class="variation-"><p class="time">Blue Book 5 $ * 100</p></dd> <dt class="variation-">Link:</dt> <dd class="variation-"><p><a href="#" rel="nofollow">Link</a></p></dd> </dl> <span class="other_item">wallet2</span> </td> <td class="tdclass">$35</td> </tr> <tr> <td class="tdclass">#2</td> <td class="tdclass quantity_col"> <dl class="variation"> <dt class="variation-">Select Category:</dt> <dd class="variation-"><p>Category 1</p></dd> <dt class="variation-">Select Product:</dt> <dd class="variation-"><p>green Books 34 Uk * 50</p></dd> <dt class="variation-">Link:</dt> <dd class="variation-"><p><a href="#" rel="nofollow">Link</a></p></dd> </dl> <span class="other_item">wallet2</span> </td> <td class="tdclass">$35</td> </tr> </tbody> </table>

应该有一种方法可以通过适当的 CSS 选择器来做到这一点，但是看到你的 DOM 很乱，我没有检查 CSS 解决方案。