Jquery:匹配两个数组的索引,字符串和对象来替换对象中的文本?

时间:2009-12-21 22:04:27

标签: javascript jquery arrays

我有两个数组,一个是字符串,另一个是对象数组。每个上的索引都对应,我想用我的字符串数组中的相应文本替换对象数组中每个对象的文本。

例如,我有一个这样的数组:

var textarr = ["value1", "value2", "value3"]

和包含一堆span元素的Jquery对象数组:

var spans = $("span.myClass");
var spanarr = $.makeArray(spans);

我正在尝试使用$ .each()迭代每个跨度,并使用我的文本数组的相应索引为当前跨度分配文本值。

我尝试了几种不同的方式,似乎没有任何工作。我在这里缺少一些逻辑,但为什么这不起作用?:

        i = 0;
        jQuery.each(spanarr, function() {                    
            $(this).text(textarr[i]);
            i++;
        });

编辑: 我想也许我的其余功能可能导致这不起作用。这是整个脚本:

        $("span input:radio").click(function() {
        if (($(this).is(":checked")) == true) {
            var parent = $(this).parent();
            var aunts = parent.parent().children();
            var parentIndex = aunts.index(parent);
            var indexToNthChild = parentIndex + 1;
            var otherSpans = $(".DropDownMenu span:nth-child(" + indexToNthChild + ")");
            var position = parent.position();
            var topValue = position.top;
            var smallPrice = otherSpans.children("span.dropDownPrice");
            var pricearr = jQuery.makeArray(smallPrice);
            var textarr = [];
            jQuery.each(pricearr, function() {
                textarr[i] = $(this).text();
            });
            alert(textarr); // Returns all the text values expected in array
            var changers = $(".bigPriceChanger");
            var changerarr = $.makeArray(changers);
            $(".DropDownMenu").css({ "top": "-" + topValue + "px" });
            $(".DropDownMenu span").css("background-image", "none");
            parent.css({ "background": "#f3f1e7 url(assets/images/branding/DropDownArrow.gif) no-repeat right" });
            otherSpans.css({ "background": "#f3f1e7 url(assets/images/branding/DropDownArrow.gif) no-repeat right" });
            alert(changearr); // Returns all span objects in array
            i = 0;
            jQuery.each(changearr, function() {                    
                $(this).text(textarr[i]);
                i++;
            });


        }
    });

7 个答案:

答案 0 :(得分:2)

尝试

$("span.myClass").each(function (i) {
    $(this).text(textarr[i]);
});

答案 1 :(得分:1)

我认为你不需要调用makeArray。只需写下:

i = 0;
jQuery.each($("span.myClass"), function() {                    
    $(this).text(textarr[i++]);
});

答案 2 :(得分:1)

我讨厌用'毕竟是一个梦想'来结束这个问题,但事实证明我的浏览器很有趣。

我已经检查了我的脚本(以及每个人建议的百万变种)在IE8和其他人的Firefox中,并且很低,看哪,它有效。

答案 3 :(得分:0)

你可能想尝试这样的事情:

var spans = $("span.myClass");
for(i=0;i<spans.length;i++){
   spans[i].innerHTML = textarr[i];
}

您可以将jQuery对象视为数组的扩展版本。您可以使用length[i]分别参考所选DOM元素的数量和特定索引处的DOM元素。

答案 4 :(得分:0)

您的代码很好,但makeArray调用是多余的

其他地方一定有错误,

这是你的代码在firefox中正常运行 http://jsbin.com/oxiwu

编辑转到http://jsbin.com/oxiwu/edit

答案 5 :(得分:0)

我认为你的代码不能正常工作,因为变量i是在其范围之外定义的。

可能有更好的解决方案,但您可以尝试以下方法:

function createF() {
    var i = 0;
    function f() {
        $(this).text(textarr[i]);
        i++;
    }
    return f;
}
f = createF();
jQuery.each(spanarr, f);     

答案 6 :(得分:0)

拨打$.makeArray的原因是什么?你可以像这样迭代你的跨度......

$("span.myClass").each(function(i) {
  alert(textarr[i]);
  $(this).text(textarr[i]);            
});