CODEWITHSUNDEEP
javascriptjquery
IAmYourFaja
IAmYourFaja

Reputation: 56934

Javascript: get children by tag type

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

<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:

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!

Upvotes: 19

Views: 33246

Answers (7)

thecodeparadox
thecodeparadox

Reputation: 87073

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

Upvotes: 1

David Thomas
David Thomas

Reputation: 253396

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.

Upvotes: 0

Chinmaya003
Chinmaya003

Reputation: 476

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

Upvotes: 9

Piyuesh
Piyuesh

Reputation: 1056

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.

Upvotes: 19

Abdul Munim
Abdul Munim

Reputation: 19217

  • myDiv's single <ul> child that has neither an id or 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")

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

Upvotes: 0

Starx
Starx

Reputation: 79021

You can do this like

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

Upvotes: 0

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146510

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.

Upvotes: 0

Related Questions