javascript - Javascript：按标签类型获取孩子

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 操作。我遇到了三个瓶颈：

• 如何获得既没有ormyDiv的独生子女（并且更改服务器端代码以生成其中之一将是一场噩梦）；和<ul>idclass
• 如何获得每个<li>人的<img>独生子女；和上面一样，让服务器生成 id/class 属性；和
• 如何获取每个<li>孩子<p>的文本（例如“Image Title #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

只是几个提示：

1. getElementById()返回单个值，而不是数组，因为 ID 应该是唯一的。

2. 在修复无效的 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>独生子女，既没有idorclass

  $("#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 概念证明。