jQuery .find() method - searching within string converted to jquery object

Question

var myHTML = '<div class="mapInfoWindow"><p class="infoWindowParagraph">DATA HERE</p><p class="infoWindowParagraph">DATA HERE</p><p class="infoWindowParagraph">DATA HERE</p><p class="infoWindowParagraph">DATA HERE</p></div><div class="mapInfoWindow"><p class="infoWindowParagraph">DATA HERE</p><p class="infoWindowParagraph">DATA HERE</p><p class="infoWindowParagraph">DATA HERE</p><p class="infoWindowParagraph">DATA HERE</p></div><div class="mapInfoWindow"><p class="infoWindowParagraph">DATA HERE</p><p class="infoWindowParagraph">DATA HERE</p><p class="infoWindowParagraph">DATA HERE</p><p class="infoWindowParagraph">DATA HERE</p></div>';

var obj = $(myHTML).get(0);
var totalCount = $(obj).find('.infoWindowParagraph').length;

console.log('Total p.infoWindowParagraph tags in the FIRST mapInfoWindow div is : ' + totalCount);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

So I have a HTML string that is similar to the following, and I'm trying to get a count of the .infoWindowParagraph tags in the FIRST .mapInfoWindow div. For whatever reason, it's not working as I expect and I'm not sure why.

HTML

<div class="mapInfoWindow">
    <p class="infoWindowParagraph">DATA HERE</p>
    <p class="infoWindowParagraph">DATA HERE</p>
    <p class="infoWindowParagraph">DATA HERE</p>
    <p class="infoWindowParagraph">DATA HERE</p>    
</div>
<div class="mapInfoWindow">
    <p class="infoWindowParagraph">DATA HERE</p>
    <p class="infoWindowParagraph">DATA HERE</p>
    <p class="infoWindowParagraph">DATA HERE</p>
    <p class="infoWindowParagraph">DATA HERE</p>    
</div>
<div class="mapInfoWindow">
    <p class="infoWindowParagraph">DATA HERE</p>
    <p class="infoWindowParagraph">DATA HERE</p>
    <p class="infoWindowParagraph">DATA HERE</p>
    <p class="infoWindowParagraph">DATA HERE</p>    
</div>

jQuery/JavaScript

var testObj = $([string from above]);
console.log(testObj.find('.mapInfoWindow').find('.infoWindowParagraph').length);

-- returns 0 every time should return 4
-- also tried below trying to focus on first index (first instance of mapInfoWindow div in object returned)

var testObj = $([string from above]).get(0).find('.infoWindowParagraph').length);

-- still returns 0

update

Well damn, I got it working now. Sorry SO for the time-wasting here, overlooked the obvious!

I'm guessing the error might be related to $([string from above]), could you please post that selector and a little more of the surrounding html please? — Hodrobond
– Hodrobond, Commented Jun 6, 2017 at 16:30
And if you do that, you could create a StackSnippet on the fly... — Jonas Wilms
– Jonas Wilms, Commented Jun 6, 2017 at 16:30
@Hodrobond - I have the HTML string in my question in a javascript variable, and I simply create the jQuery object from that variable using $(myvariable); — Phil
– Phil, Commented Jun 6, 2017 at 16:31
Your updated question appears to print 4 from the first snippet, isn't that the expected behavior? Apologies, i'm not understanding. — Hodrobond
– Hodrobond, Commented Jun 6, 2017 at 16:42

Bhuwan · Accepted Answer · 2017-06-06 16:50:04Z

1

You can try this:

var testObj = '<div class="mapInfoWindow"><p class="infoWindowParagraph">DATA HERE</p><p class="infoWindowParagraph">DATA HERE</p><p class="infoWindowParagraph">DATA HERE</p><p class="infoWindowParagraph">DATA HERE</p></div><div class="mapInfoWindow"><p class="infoWindowParagraph">DATA HERE</p><p class="infoWindowParagraph">DATA HERE</p><p class="infoWindowParagraph">DATA HERE</p><p class="infoWindowParagraph">DATA HERE</p></div><div class="mapInfoWindow"><p class="infoWindowParagraph">DATA HERE</p><p class="infoWindowParagraph">DATA HERE</p><p class="infoWindowParagraph">DATA HERE</p><p class="infoWindowParagraph">DATA HERE</p></div>';

console.log($(testObj).first('.mapInfoWindow').children('.infoWindowParagraph').length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Jun 6, 2017 at 16:50

Bhuwan

16.9k5 gold badges38 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

capote1789 · Accepted Answer · 2017-06-06 16:37:53Z

1

The issue is that you are trying to select ".mapInfoWindow" and that is the actual object, you can only do .find() on descendants nodes.

Try:testObj.find('.infoWindowParagraph').length

That will work!

answered Jun 6, 2017 at 16:37

capote1789

766 bronze badges

Collectives™ on Stack Overflow

jQuery .find() method - searching within string converted to jquery object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related