18

サーバー側が次の形式の結果のHTMLを生成している状況があります。

<div id="myDiv">
    <ul>
        <li class="imageElem">
            <img src="..."/>
            <div id="imgInfo">
                <p class="imgDetail">
                    Image Title #1
                </p>
            </div>
        </li>

        <!-- Etc. for many images (1 <li> per <img>) -->

    </ul>
</div>

このリストをループして、jQueryを使用してオンザフライでDOM操作を実行しようとしています。私は3つのボトルネックに直面しています：

  • またはを持たないmyDivの単一の<ul>子を取得する方法（およびこれらのいずれかを生成するようにサーバー側のコードを変更することは悪夢になります）; とidclass
  • <li>それぞれの<img>一人っ子を取得する方法。サーバーにID/クラス属性を生成させるための上記と同じ。と
  • <li>それぞれの1人の子供のテキストを取得する方法<p>（例：「画像タイトル＃1」）

私は（これらの3つの問題のそれぞれについて）次のことを無駄にしようとしています：

var myDivUL = document.getElementById("myDiv").ul;
for(i = 0; i < myDivUL.length; i++)
{
    var currImageElem = myDivUL[i].img;
    var currPText = myDiv[i].div.p.text;

    // ... rest of function omitted for brevity
}

私はここで何が間違っているのですか？id / class属性にアクセスせずに3つの要素を取得するには、何を変更する必要がありますか？前もって感謝します！

4

7 に答える 7

18

あなたはこのようなことをすることができます

var myDivUL = document.getElementById("myDiv").getElementsByTagName('ul')[0];

などなど、重要なのは、任意のhtml要素でgetElementsByTagName（）を使用することです。

于 2012-04-24T11:04:09.033 に答える
8

あなたはこのようなすべてのものを手に入れることができます：

$("#myDiv").find("ul:not([id],[class])").each(function()
{
    $(this).find("li").each(function(){
       var IMG = $(this).find("img:not([id],[class])");
       var PText = $(this).find("p.imgDetail").text();
    });
})
于 2012-04-24T11:11:23.910 に答える
1 
var ul = $('#myDiv ul').filter(function() {
    return !$(this).attr('id') && !$(this).attr('class');
});
var img = $('li > img', ul); // will give li > img child of the "ul" 
var pText = $('li p', ul).text();
于 2012-04-24T11:01:56.867 に答える
0

これを実装する方法は次のとおりです。

$('ul li').filter(
    function(){
        return !this.id && !this.className;
    }).find('img, p').each(
        function(){
            if ($(this).is('img')){
                imgs.push($(this));
                // or console.log($(this));
                // or anything else, really...
            }
            else if ($(this).is('p')){
                pText.push($(this).text());
                // or console.log($(this));
                // or anything else, really...
            }
        });

JSFiddleの概念実証。

于 2012-04-24T11:35:55.647 に答える
0

あなたはこれを次のように行うことができます

$("ul:not([id], [class])").each(function() {
      var img = $(this).find("img");
      var p = $(this).find("p.imgDetail");
});
于 2012-04-24T10:59:03.393 に答える
0

ほんの2、3のヒント：

  1. getElementById()IDは一意であると想定されているため、配列ではなく単一の値を返します。

  2. 無効なHTMLを修正する場合は、ブラウザが重複するIDをどのように処理するかを確認する必要があります。FirebugのDOMツリーまたはブラウザの同等のものが出発点として適している場合があります。

于 2012-04-24T10:58:11.673 に答える
0

  • myDivまたはのどちらも持たないの<ul>一人っ子idclass 

    $("#myDiv li:not([class]):not([id])")

  • <li>それぞれの<img>一人っ子を取得する

    $("#myDiv li:not([class]):not([id]) img")

  • <li>それぞれの1<p>人の子供のテキストを取得する

    $("#myDiv li:not([class]):not([id]) p")

結果をループして、.each()自分のものを取得できます

于 2012-04-24T11:04:05.867 に答える