使用 jQuery 在字符串中选择标签答案

【问题标题】：Select tags within a string using jQuery使用 jQuery 在字符串中选择标签
【发布时间】：2009-08-02 19:26:04
【问题描述】：

我的网站因 ajax 调用而获得了价值。之后，我想将该结果（字符串）插入到标签中。但是，我想以一种方式插入该结果：（1）它必须具有不透明度 = 0，然后（2）它将 slideDown（）所以整个内容列表被使用动画向下推，最后（3）改变不透明度= 1.想象一下这就像一个Facebook消息列表插入过程

我打算这样做的方式是首先将结果字符串从 ajax 返回到 opacity=0。但是，我不知道如何使用 jQuery 从字符串中选择标签。我知道 jQuery 只能从 DOM 中选择。那么如何做到这一点呢？有什么建议吗？

谢谢

【问题讨论】：

请发布您的 html sn-p
好的，让我们做这个实验。返回变量是 str = string。假设返回值低于 var str = "aabb";现在我想从那个 str 中隐藏 #aa 但它不起作用： $(str).find('#aa').hide(); msgList.html(str + originalHtml); msgList 中的结果仍然显示“aa”
更新了我的答案。如果您的响应没有包含元素，您需要 .filter 而不是 .find

标签： javascript jquery html ajax animation

【解决方案1】：

我会考虑将返回值放在 SPAN 中。隐藏将容纳它的容器。将 SPAN 的不透明度设置为 0，然后将结果添加到其中并放入容器中。完成后，向下滑动容器并在 slideDown 方法的回调中显示结果。

$.ajax({
   ...
   success: function(data) {
         var container = $('#container').hide();
         $('<span />').css( 'opacity', 0 )
                      .html(data.result)
                      .appendTo(container);
         container.slideDown('normal', function() {
                       $(this).( 'span:first' )
                              .animate( { 'opacity': 1.0 } );
                   });
   }
   ...
});

【讨论】：

我试图不改变 DOM 结构，因为有其他 javascript 函数在这个结构上工作，需要确保它与 return 相同。

【解决方案2】：

hide() 是一个 jquery 函数，意思是只对 jquery 对象起作用，所以你必须先将 html 注入到 DOM 中，然后在 DOM 元素上调用 hide()。

$('#msgList').load (url,data,function(html){
var $this = $(this); // cache $(this) for performance
$this.hide().html(html); // inject the html in the DOM
$('#aa', $this).hide(); // hide #aa
$this.show(); // reveal the messageList
});

【讨论】：

我不使用函数加载但我使用 ajax 函数不知道上面的 $this 是什么意思。我试过了，但不起作用 var str = "aabb"; $(str).find('#aa').hide(); msgList.html(str + originalHtml);
$this 只是对容器的缓存引用。因为之后我遍历 DOM 以到达其父级（$(this).parent())，接下来的任何内容都将“this”指向容器的父级，而不是容器本身。 $this 可以解决这个问题。

【解决方案3】：

以下将使用简单的 .get() 包装器进行 ajax 调用。

然后回调函数会将响应加载到一个jquery对象中并找到你想要的标签。

然后它隐藏这个标签并将它附加到一个 div 容器中。

最后它会滑下来。

//do ajax call
$.get( url, function(html) {

    //load html into a jQuery object, find the tag by id then hide it
    var $el = $(html).filter('#someId').hide();
    //append element to the dom and slide it down
    $el.appendTo('#someDiv').slideDown('slow');   

});

【讨论】：

我试过了，当 return var str = "aabb"; $(str).find('#aa').hide(); msgList.html(str + originalHtml);
在这种情况下将是 .filter 而不是 .find。