0

この全体的なトピック（子ノードを取得する最良の方法）に関する多くの投稿を見ていますが、2層のネストされた子の反復と割り当てに関するものは何も見つかりません。[] と () で子供が呼び出される例をオンラインで見たことがあります。前もって感謝します。

この 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 
var files = $('#sortable img').map(function(){
     return this.src.split('/').pop();
}).get();

http://jsfiddle.net/uyQXP/

于 2013-05-15T18:01:28.120 に答える
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 のすべてのノードの子を調べてから、画像を "images" 配列に解析できます。これは reduce を使用してさらに圧縮できますが、これにより、Jquery を使用しない簡単なオプションが得られると考えました。

上記の例はJSFIDDLEでテストされました

于 2018-04-20T18:04:26.310 に答える