如何在 2 个跨度之间添加一个跨度?

发布于 2024-11-27 04:42:19 字数 470 浏览 3 评论 0原文

在我的页面上,我有多个具有指定类的 div,其中有 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>');
            }
        }

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

On my page, I have multiple div with specified class which have 2 span elements. I want to check if the second element has a particular class, add new span object between the 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>');
            }
        }

I used the above code, but this is not working.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

流绪微梦 2024-12-04 04:42:19

您不应该使用

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

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

Shouldn't you be using

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

The code you have will add a new span as a child of allrtSp[i] as opposed to between it and the next span.

帝王念 2024-12-04 04:42:19

试试这个

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

Try this

var secondSpan;
$(".rtSp").each(function(){
   lastSpan = $(this).find("span:last");
   if(lastSpan.hasClass("classNameToCheck")){
     lastSpan.before("<span  class='rtNoChild'>text</span>");
   }
});
月隐月明月朦胧 2024-12-04 04:42:19

检查此代码:-

<!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>

Check with this code:-

<!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>
往日情怀 2024-12-04 04:42:19

我能想到的最简洁的:

$('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>

Most concise I can think of:

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

for the following HTML

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

will produce

<div>
    <span>1</span>
    <span class="rtNoChild">2</span>
    <span class="the_class">3</span>
</div>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文