jQuery获取跨度的文本内容答案

【问题标题】：jQuery getting text content of a spanjQuery获取跨度的文本内容
【发布时间】：2016-10-29 22:20:16
【问题描述】：

我正在尝试在 Dropzone.js 中编写删除函数。为了做到这一点，我需要文件的 id 上传方式。

我试图获取对象的属性但没有成功。现在我正在尝试使用 jQuery 来获取拥有它的 span 的值或文本内容。

这是结构的截图。我正在尝试的 jQuery 代码是：

var loooot = $(".dz-filename").parents('span').text();

更具体地说，我正在尝试获取数字 1_1477778745352（这是一个时间戳）。

Dropzone代码如下：

<script>

var listing_id = "1"; 

// these are the setting for the image upload
Dropzone.options.pud = {
acceptedFiles: ".jpeg,.jpg,.png,.gif",
uploadMultiple: false,
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 1, // MB
addRemoveLinks: true,
maxFiles: 10,
renameFilename: function (filename) {return listing_id + '_' + new Date().getTime();},
init: function() 
{
this.on("removedfile", function(file) 
  { 
  var loooot = $("span", ".dz-filename").html();
  alert(loooot);
  });
}
};
</script>

【问题讨论】：

file.name 应该在removedfile的回调中保留文件名
这实际上是我尝试的第一件事，但它在重命名之前返回了上传文件的名称。重命名后，当我将鼠标悬停在图像缩略图上时，我可以看到 ney 名称，但我无法获得新的重命名。
但是你可以像我一样上传后保存到dropzone
谢谢，我接受了你的回答。

标签： javascript jquery jquery-selectors dropzone.js parents

【解决方案1】：

试试这个使用 JQuery 的 .text(); 来获取内部文本更新：像这样使用 DOM .ready()。

深度选择器

$(document).ready(function(){
  var fname = $("#pud .dz-filename span [data-dz-name]").text();
});

或者（如果您的表单是动态的）

function get_fname(){
return $("#pud .dz-filename span [data-dz-name]").text();
}

然后使用get_fname();

【讨论】：

你的表单是动态的吗？
这部分是动态的。
动态如何？从 ajax 或点击创建或..？
当我上传 10 张图片时，每张图片都会得到您在屏幕截图中看到的结构。在未上传图片之前，它们不存在。
所以你必须等待图片加载，然后使用上面更新的var f = get_fname();

【解决方案2】：

它变得未定义，因为 dropzone 是动态工作的，使用这个：

$('body').find(".dz-filename").find('span').text();

最好的方法是声明dropzone：

//first declare somewhere variable
var my_drop;

// then on creating dropzone:
my_drop = new Dropzone('.dropzone', { 
/* your setup of dropzone */ 
});

然后您可以使用以下命令检索有关文件的信息：

my_drop.files[0].name

[0] 代表第一个文件，如果有多个文件，您可以循环访问它们。

【讨论】：

如果是这样，从body 开始不会有太大帮助。一个人无法得到不存在的东西。
它在body上，它是在dom准备好之后才创建的，所以你不能只用dz-filename的类名来获取它
然后你应该用变量定义你的Dropzone并使用dropzone：dropzone_variable.files[0].name

【解决方案3】：

用途：

var loooot = $("span", ".dz-filename").html();

工作Demo。

var loooot = $("span", ".dz-filename").html();
alert(loooot);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="dz-filename">
  <span>Test</span>
</div>

编辑

由于您正在动态设置文本，jquery 可能会在您设置它之前读取 HTML，为了防止这种情况，您必须在时间戳之后调用此函数作为回调（如果不了解您的方式，我将无法帮助您设置span 文本）。因此，请执行以下操作：

function setSpan(callback) {
    // Set your stuffs

    // Call the callback
    callback();
}

function getText() {
    // I'm the callback witch get the html
}

//Onload
setSpan(getText());

编辑

对于 dropzone，您可以使用 queuecomplete 在队列之后启动一个函数，我不是 dropzone 专家，但我想：

init: function () {
    this.on("queuecomplete", function (file) {
        //Get span html
        alert("All files have uploaded ");
    });
  }

【讨论】：

变量 loooot 以未定义的形式返回
它可能会返回 Undefined，因为 Dropzone 是动态创建的。您的示例有效，因为它是静态的。这是我最好的解释。您能否修改您的答案，使其适用于动态创建的元素？
我已经编辑了问题，但你必须告诉我你是如何设置时间戳的，或者你可以使用回调构建函数

【解决方案4】：

我找到的工作解决方案是这样的：

init: function() 
  {
  this.on("removedfile", function(file) 
    { 
    var loooot = $(file.previewElement).find('[data-dz-name]').text();
    alert(loooot);
    });
  }

【讨论】：