Javascript：按标签类型获取子项

Javascript: get children by tag type

提问by IAmYourFaja

I have a situation where the server-side is producing resultant HTML of the form:

我有一种情况，服务器端正在生成表单的结果 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>

I am trying to loop through this list and perform on-the-fly DOM manipulation with jQuery. I'm running into three bottlenecks:

我正在尝试遍历此列表并使用 jQuery 执行动态 DOM 操作。我遇到了三个瓶颈：

• How to obtain myDiv's single <ul>child that has neither an idor class(and to change the server-side code to produce one of these will be a nightmare); and
• How to obtain each <li>'s single <img>child; same as above for getting the server to generates id/class attributes; and
• How to obtain each <li>'s single <p>child's text (e.g. "Image Title #1")

• 如何获得既没有ormyDiv的单个<ul>孩子（并更改服务器端代码以生成其中一个将是一场噩梦）；和idclass
• 如何获得每个<li>人的<img>独生子女；与上面相同，用于让服务器生成 id/class 属性；和
• 如何获得每个<li>的单个<p>孩子的文本（例如‘图片标题＃1’）

I am trying the following (for each of those three issues respectively) to no avail:

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

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
}

What am I doing wrong here?What doe I need to change to get the three elements without having access to id/class attributes? Thanks in advance!

我在这里做错了什么？我需要更改什么才能在无法访问 id/class 属性的情况下获取三个元素？提前致谢！

采纳答案by Chinmaya003

You can get all things like this:

你可以得到这样的所有东西：

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

回答by Piyuesh

You can do something like this

你可以做这样的事情

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

& so on, the key is to use getElementsByTagName() on any html element.

等等，关键是在任何 html 元素上使用getElementsByTagName()。

回答by thecodeparadox

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

回答by Abdul Munim

• myDiv's single <ul>child that has neither an idor class

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

• obtain each <li>'s single <img>child

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

• obtain each <li>'s single <p>child's text

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

• 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")
  

You can loop through the result with .each()to get your stuffs

你可以遍历结果.each()以获取你的东西

回答by álvaro González

Just a couple of tips:

只是一些提示：

1. getElementById()returns a single value, not an array, because IDs are supposed to be unique.

2. You should verify how your browser handles duplicate IDs when fixing invalid HTML. Firebug's DOM tree or your browser's equivalent may be a good starting point.

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

2. 在修复无效的 HTML 时，您应该验证浏览器如何处理重复的 ID。Firebug 的 DOM 树或浏览器的等价物可能是一个很好的起点。

回答by Starx

You can do this like

你可以这样做

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

回答by David says reinstate Monica

The way I'd implement this is:

我实现这个的方式是：

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

JS Fiddle 概念验证。