如何在两个跨度之间添加跨度?

时间:2011-07-28 14:48:19

标签: jquery element

在我的页面上,我有多个具有指定类的div,它有2个span元素。我想检查第二个元素是否具有特定类,在2个跨度之间添加新的span对象。

var allrtSp = $(".rtSp");
        for (i = 0; i < allrtSp.length; i++) {
            var cls= $(allrtSp[i]).next().attr('class');
            var newSpan;
            if (cls != 'rtMinus' && cls != 'rtPlus')
            {
                $(allrtSp[i]).add('<span class="rtNoChild"></span>');
            }
        }

我使用了上面的代码,但这不起作用。

4 个答案:

答案 0 :(得分:1)

试试这个

var secondSpan;
$(".rtSp").each(function(){
   lastSpan = $(this).find("span:last");
   if(lastSpan.hasClass("classNameToCheck")){
     lastSpan.before("<span  class='rtNoChild'>text</span>");
   }
});

答案 1 :(得分:1)

你不应该使用

$(allrtSp[i]).after('<span class="rtNoChild"></span>')

您拥有的代码将添加一个新的跨度作为allrtSp [i]的子级,而不是它与下一个跨度之间。

答案 2 :(得分:0)

请检查此代码: -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery FROM CDN vs self host</title> 

    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js" type="text/javascript"></script>

</head>
<body>
<h1>Test</h1>

<div class="divcssclass">
<span>Test1</span>
<span class="particularClass">Test2</span>
</div>

<div class="divcssclass">
<span>Test3</span>
<span>Test4</span>
</div>

<div class="divcssclass">
<span>Test5</span>
<span class="particularClass">Test6</span>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("div.divcssclass").each(function () {
            var secondSpan = $(this).find("span:nth-child(2)");
            //alert(secondSpan.hasClass("particularClass"));
            if (secondSpan.size() > 0 && secondSpan.hasClass("particularClass")) {
                secondSpan.before('<span> Test </span>');
            }
        });

    });
    </script>
</body>
</html>

答案 3 :(得分:0)

我能想到的最简洁:

$('div.rtSp span:nth-child(2).the_class').each(function() {
    $(this).before('<span class="rtNoChild">2</span>');
});

以下HTML

<div class="rtSp">
    <span>1</span>
    <span class="the_class">3</span>
</div>

将产生

<div>
    <span>1</span>
    <span class="rtNoChild">2</span>
    <span class="the_class">3</span>
</div>