jQuery .prepend() 使用来自另一个元素的类，如果它以特定单词开头

Posted 2023-04-13

【中文标题】jQuery .prepend() 使用来自另一个元素的类，如果它以特定单词开头

【英文标题】：jQuery .prepend() using class from another element if it starts with specific word

【发布时间】：2011-05-29 17:18:21

【问题描述】：

我想在将要添加的元素中使用另一个现有元素类进行添加。为了避免混淆，假设我只知道父元素类的开头有单词“box”，并且假设类的其余部分是随机生成的。

因此我显然不能写例如：

.prepend('<div class="box-something_more"></div>'); 

因为据我所知，父元素类可能是“box-nothing”或“box-something-else”或数以百万计的其他东西。

html结构：

<div class="box-something"> <!-- source of the box- class -->
    <div class="box-something_more"></div> <!-- prepended element -->
    <div class="box-something_evenmore"></div> <!-- prepended element -->

</div>

<div class="box-two"> <!-- source of the box- class -->
    <div class="box-two_more"></div> <!-- prepended element -->
    <div class="box-two_evenmore"></div> <!-- prepended element -->

</div>

所以需要做的是，将被前置的元素从父元素获取其类的开头。

http://jsfiddle.net/tDUpD/2/

编辑：这似乎可以解决问题。 http://jsfiddle.net/tDUpD/3/

【问题讨论】：

prepend()，还是prependTo()?

@DavidThomas prepend() 我不确定这在这种情况下是否重要……我想要实现的目标仍然保持不变。

如果有多个以'box'的class开头的元素会怎样？你想创建多个div 元素吗？

@DavidThomas 我想在前面的 div 中使用完整的类名。

所以只有 一个 div 的类以box 开头？即使在之后你又添加了divs？

【参考方案1】：

这是否符合您的想法？如果不是，请尝试更清楚地说明您的问题：

示例：

HTML

<div class="foo"></div>
<div class="doo"></div>

JS

var childClasses = ["bar", "baz"];

$('.foo, .doo').each(function() 
    var $self = $(this);
    $.each(childClasses, function(i, childClass) 
        $self.append($('<div/>', 
            'class': $self.attr('class') + "_" + childClass
        ));
    );
);

= 生成 HTML

<div class="foo">
  <div class="foo_bar"></div>
  <div class="foo_baz"></div>
</div>
<div class="doo">
  <div class="doo_bar"></div>
  <div class="doo_baz"></div>
</div>

【讨论】：

@polarblau 如前所述，假设我 no 控制父类，所以我不能只写 ** $('.foo, .doo').each( function() ** 就我所知，它可能是“foo-something”和“doo-something-else”，在这种情况下它们不会指向任何地方。所以，它应该更像 ** $('[class^ ="box-"]').each(function() ** 当然还有 prepend 而不是 append。这就是我想要的：jsfiddle.net/tDUpD/3 虽然我不明白为什么我不能以这种方式做到：jsfiddle.net/tDUpD/2

您可以使用任何您需要的选择器。这只是一个关于如何构建嵌套元素并根据父类分配类的示例。 $('div').each(…) 在我的示例中也可以使用——但这真的不是我想要说明的重点。

@polarblau 虽然当你的答案不是那么准确时要求我更清楚有点奇怪。还是谢谢。 （不能真正将您的答案标记为解决方案，因为它确实不是一个直截了当的）

我的意思是当你显然得到了关于 prepend 和 [class^="box-"] 的部分（或者应该已经）否则.. 对不清楚的问题给出不清楚的答案一点也不奇怪:)

对于那些不知道他在说什么的人（正如你在你的 cmets 中所说的那样），你肯定对答案的准确性有点挑剔。鉴于您的问题非常模糊-我认为您的暴躁评论在这种情况下并不合适。无论如何，您的编辑表明我的回答至少“启发”了您，这对我来说已经足够了。继续……