Question

我遇到的情况是服务器端正在生成表格的结果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操作。我遇到了三个瓶颈：

如何获取myDiv个没有<ul>或id的单class个孩子（并更改服务器端代码以生成其中一个是一个噩梦）;和
如何获得每个<li>的单<img>个孩子;与上面相同，用于使服务器生成id / class属性;和
如何获取每个<li>的单<p>个孩子的文字（例如“图片标题＃1”）

我正在尝试以下（分别针对这三个问题中的每一个）无济于事：

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属性？提前谢谢！

Answer 1

你可以做这样的事情

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

＆安培;所以，关键是在任何html元素上使用 getElementsByTagName（）。

Answer 2

你可以得到这样的一切：

$("#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();
    });
})

Answer 3

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();

Answer 4

只是一些提示：

getElementById()返回单个值，而不是数组，因为ID应该是唯一的。
您应该在修复无效的HTML时验证浏览器如何处理重复的ID。 Firebug的DOM树或浏览器的等价物可能是一个很好的起点。

Answer 5

你可以这样做

$("ul:not([id], [class])").each(function() {
      var img = $(this).find("img");
      var p = $(this).find("p.imgDetail");
});

Answer 6

myDiv有<ul>或id的单身class儿童
```
$("#myDiv li:not([class]):not([id])")
```

获取每个<li>的单个<img>孩子

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

获取每个<li>的单个<p>孩子的文字
```
$("#myDiv li:not([class]):not([id]) p")
```

您可以使用.each()循环搜索结果以获取您的内容

Answer 7

我实现这个的方式是：

$('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...
            }
        });

JS Fiddle proof of concept

Javascript：按标签类型获取子项

7 个答案: