Question

我正在尝试将CSS添加到XML rss feed中的部分文本中（我无法更改它）。那么使用Javascript呢？

问题在于我希望它在右对齐时更小。

我所说的文字部分是“此优惠有效，直到## / ## / ##”。

问题在于：

.itemContent br {
text-align:right;
font-size: 0.5em;
}

Answer 1

仅使用CSS是不可能的，div元素中的所有文本都是散布有br元素的字符数据（CDATA）。使用CSS，您只能定位整个元素及其整个内容。如果您无法更改或重写HTML，则无法重新设置单个元素的CDATA子集。

使用Javascript很难，因为你有无法选择整个元素的相同限制。您必须按照任意条件开始拆分内容，例如希望总是有相同数量的<br>元素。解决方案本质上是不稳定的。

Answer 2

如果您愿意放弃隐藏<br>，那么只能使用CSS而不使用Javascript。也就是说，不要隐藏div中的所有<br>，只隐藏最后一个。

li > div > br:last-child {
    display:none;
}

.itemContent {font-size:.5em}
.itemContent::first-line {font-size:2em}

诀窍是将整个div的字体大小减半，然后将div的第一部分（直到第一个br）恢复到原始大小。

Updated fiddle

Answer 3

问题是JavaScript是异步处理的。在your code中，jQuery将首先查找任何.itemContent元素（但不会找到任何元素）。然后FeedEk加载RSS文件并将其内容插入DOM。这就是为什么你的代码不起作用的原因，你过早地寻找元素。

在jQuery完成加载和处理RSS之后，您只能访问.itemContent元素。不幸的是，FeedEk没有提供回调方法，所以你不知道它何时完成。使用jQuery的ajaxSetup时有一个解决方法。 FeedEk在内部使用jQuery的Ajax函数，它提供了一种在Ajax请求之后调用函数并完成处理的方法。

我使用您提供的代码对此进行了测试，这对我有用。只需替换您自己的FeedEk电话：

$(document).ready(function () {  

  jQuery.ajaxSetup({
    complete: function () {
      $('.itemContent').each(function(i, element) {
        $($(element).find('br')[0].nextSibling)
        .wrap('<div class="offervalid"/>')
        .before('<br><br><br><br><br>'); // if you really need <br>s
      });
    }
  });

  $('#divRss').FeedEk({
    FeedUrl: 'http://dimmituquando.blogspot.com/feeds/posts/default',
    MaxCount: 10
  });

});

Answer 4

尝试使用内联样式标记：

<span style="text-align:right; font-size: 0.5em;">This offer is valid till ##/##/##</span>

Answer 5

使用javascript，您需要修改feed的html以将该段文本包装在div中，以便您可以设置样式。

http://jsfiddle.net/WC5F8/2/

$(".itemContent").html(function(i,html){
    return html.replace(/(offerta valida fino al \d+\/\d+\/\d+)/i,"<div class='offervalid'>$1</div>");
});

的CSS：

.itemContent .offervalid {
    float:right;
    font-size: 0.5em;
}

注意，我认为您的示例代码中存在拼写错误。优惠有效期至2031年？

如何设置两个元素之间的文本部分？

5 个答案: