使用jQuery对子元素进行文本对齐

Question

我有这个元素

<p class="msg-item"></p>

动态填充

无论

<span class="you"></span> 

或

<span class="stranger"></span> 

我试图让jQuery到 text-align 右侧的<span class="you"></span>元素。

所以，我尝试使用此代码：

if($('p.msg-item').find('span.you').length != 0){
    $("p.msg-item.span.you").css('text-align','right');
}

但它不起作用，任何建议都将不胜感激！

Answer 1

问题是选择器，如果你不使用空格，那么它会找到包含3个类class="msg-item span you"的元素。在你的情况下哪个不存在。

改为：

$("p.msg-item span.you")

最好只用css执行此操作：

p.msg-item span.you{
  text-align: right;
}

Answer 2

span.you是p.msg-item的孩子。那就像

$("p.msg-item span.you").css('text-align','right');