0

尽管我看到很多关于这个整体主题的帖子（获取子节点的最佳方法），但我找不到任何关于两层嵌套子节点中的迭代和分配的信息。我在网上看到过用 [] 和 () 来称呼孩子的例子。提前致谢。

假设我有这个 HTML，并且想要在“可排序”UL 元素中包含所有文件名（不包括 URL 路径或文件扩展名）的字符串。

<ul id="sortable" class="ui-sortable">
    <li class="ui-state-default">
        <img id="aImg" alt="sortable image" src="images/a.jpg" />
    </li>
    <li class="ui-state-default">
        <img id="bImg" alt="sortable image" src="images/b.jpg" />
    </li>
    <li class="ui-state-default">
        <img id="cImg" alt="sortable image" src="images/c.jpg" />
    </li>
</ul>

我的 JavaScript 看起来像这样：

 var theImageOrder = "";
 var theCounter = 0;
 while (theCounter < $('#sortable').children().length) 
 {
    var theImageName = $('#sortable').children(theCounter).children(0).attr("src").toString().substring($('#sortable').children(theCounter).children(0).attr("src").toString().lastIndexOf("/") + 1, $('#sortable').children(theCounter).children(0).attr("src").toString().lastIndexOf("."));
    theImageOrder = theImageOrder + theImageName;
    theCounter++;
}

我希望输出是 abc，但我得到的是 aaa。

4

4 回答 4

4

UL 应该只有 LI 孩子，我猜选择图像会很聪明，因为您正在寻找 src 属性。$.map 返回数组中的所有内容，您可以选择加入它以获取字符串。使用>确保它只是直接的孩子等：

var images = $.map($('#sortable > li > img'), function(el,i) {
    return el.src.split('/').pop();
}).join(', ');

小提琴

于 2013-05-15T17:59:27.513 回答
4 
var files = $('#sortable img').map(function(){
     return this.src.split('/').pop();
}).get();

http://jsfiddle.net/uyQXP/

于 2013-05-15T18:01:28.120 回答
1

jQuery each()很可能是您正在寻找的答案。

var theImageOrder = "";
$('#sortable > li > img').each(function(index, element){
    theImageOrder += element.attr('src').howeverYouWantToModifyThisString();
});
于 2013-05-15T18:01:35.100 回答
1

我在 ES6 中整理了一个香草 JS 递归示例，可能对未来的旁观者有所帮助：

let images = [];

const processChildrenNodes = (node, getNodeChildren) => {
  const nodeChildren = [...node.childNodes];

  for (const thisNode of nodeChildren) {
    if (getNodeChildren)
      processChildrenNodes(thisNode, true);

    if (thisNode.nodeName === 'IMG') {
      images.push(
        thisNode.getAttribute('src')
        .replace('.jpg', '')
        .split('/')
        .filter(item => item !== 'images')
      );
    }
  }
};

processChildrenNodes(document.getElementById('sortable'), true);

这将允许您查看 IMG 的所有子节点，然后将图像解析为“图像”数组。这可以使用reduce 进一步压缩，但我认为这会给你一个没有Jquery 的简单选择。

上面的例子是在JSFIDDLE上测试的

于 2018-04-20T18:04:26.310 回答