Question

您好我尝试将p-tag中的数字设置为不同的样式并阻止a-tag中的样式。 jQuery将带号码的span-tag添加到p-tag中，但是不应该在a-tag的href中添加它。

<div class="ce_text">
  <p>1234 example <a class="link" href="http://www.abc.de/123/def" target="_blank">www.abc.de/123/def</a> goes on 567.</p>
  <a href="http://www.999.com">Link 999 (no function)</a>
  <p>1234 example <a class="link" href="http://www.abc.de/123/def" target="_blank">www.abc.de/123/def</a> goes on 567.</p>
</div>

p-tag中的数字应包含span-tag，a-tag不应包含：

RIGHT: <p><span="number">123</span>text goes here.</p>

WRONG: <a href="http://www.abc.de/<span class="number"123">123<span>/def">link</a>

我的方法不起作用。

我的小提琴： https://jsfiddle.net/huppen/7f1ccvy5/6/

感谢任何解决我问题的问题。

问题解决了Rejith R Krishnan的方法（谢谢！）：

$(".ce_text p").contents().filter(function(){ 
  return this.nodeType == 3; //nodeType 3 is the text nodes
}).each(function(i, v) {
    $(this).replaceWith(function(){
      return this.nodeValue.replace(/(\d+)/g, '<span class="number">$1</span>')
    });
});

Working JS-Fiddle

Answer 1

您可以使用此方法。使用contents()和filter()选择元素中的文本节点，然后用新HTML替换它们。

$(".ce_text p").contents().filter(function(){ 
  return this.nodeType == 3; //nodeType 3 is the text nodes
}).each(function(i, v) {
    $(this).replaceWith(function(){
      return this.nodeValue.replace(/(\d+)/g, '<span class="number">$1</span>')
    });
});

DEMO

Answer 2

此查询选择器无法达到此目的，另一方面，您可以在p内的span标记内创建文本，并在选择器中使用它。

<强> Running Fiddle

Answer 3

尝试使用此解决方案。我在小提琴手上进行了测试并且它有效，但并不优雅：

$.each($('.ce_text p'), function(i, el){
    var txt = $(el).find("A").text();
    txt = txt.replace(/(\d+)/g, '<span class=number>$1</span>');
    txt = txt.substring(txt.indexOf("<span"));
    txt = txt.substring(0, txt.indexOf("</span>") + 7);

    $(el).find("A").after(txt);
    $(el).find("A").remove();
});

jQuery不在p-tag中选择a-tag

3 个答案: