0

I have a page with different entries. Sometimes the first item of this entry is a <ul> and sometimes it's a <p>. How can I test which one it is?

Here is an example with the first item <p>:

<div class="itsanyclass">
  <h3>XYC</h3>
  <div id="job123">
    <p>blablabla</p>
    <ul>
      <li>blablabla</li>
    </ul>
  </div>

Here's an example with the first item a <ul>:

<div class="itsanyclass">
  <h3>XYC</h3>
  <div id="job123">
    <ul>
      <li>blablabla</li>
    </ul>    
    <p>blablablabla</p>
  </div>

I tried this:

if($(":first-child", this) == "ul")

The class .this means its the object which called the function.

3
  • $(this).children().first().prop('tagName') === 'ul' or $(this).children('ul:first-child').length > 0, and probably a couple of others. You are trying to compare a jQuery object to a string, which will never work. I guess the question is: Why do you want to do this? Maybe there is a better solution to the overall problem than testing the type of the first child. Jul 8, 2014 at 16:09
  • my thoughts were, testing if the first child is ul, if not it is definitly p
    – Salix
    Jul 8, 2014 at 16:23
  • And my question was why do you need to know the type? What are you doing with this information? What problem are you really trying to solve? Jul 8, 2014 at 16:37

3 Answers 3

0

You could use contains. I did this for a project I was working on where the content was also in first or second child elements.

$(document).ready(function(){
    $('element').on('click', 'element:contains("blablabla")', function(){
        alert('you clicked me');
    });
});

Alternatively, you could just add a class or id to the element and call that

4
  • I don't really see how this is relevant to the question. Jul 8, 2014 at 16:18
  • Why is that? It demonstrates how the op could find the element regardless of how many children are between it and the parent Jul 8, 2014 at 16:20
  • What makes you think the OP wants to find the li element? Jul 8, 2014 at 16:21
  • In the question that is the same text that is in the p element. I presume the text will be different in the p and the li. I would think that both the li and p tags would have different text. If the text is different the op could target that text they are looking for Jul 8, 2014 at 16:25
0

I respect the answers from others but, I suppose the exact question is... "Which is the first type element?"

Although other answers maybe correct, still to exactly answer the question you may try this:

var first_child = $('.this > div > :first-child');
alert($(first_child).prop('tagName'));

And ofcourse, for associating functional code to your detected type you can use .is() as already shown in one the answers.

Look here: http://jsfiddle.net/zLwL2/

0

There are a couple problems with your code:

if( $(":first-child", this) == "ul" )

Firstly, it looks like you expect this in JavaScript to refer to the <div> with class="this", but that's not what this means in JavaScript. In JavaScript this is a variable that refers to the current scope. If you want to get the element with class="this", you need to use the .this selector:

console.log( $(".this") );
// => [<div class="this"></div>]

Now, to get the first child of the div inside .this, you need to do this:

console.log( $(".this > div > :first-child") );
// => [<p>blablabla</p>]

You might think you can get away with just ".this :first-child", but you can't—without the immediate child selectors (>), :first-child will return every element that's the first child of any of .this's children.

Now that we've selected the correct element (which will be a <p> or a <ul>), we use jQuery's is() function to test whether or not it matches a given selector, i.e. .is('ul') will return true only if the selected element is a <ul>.

In the end, what we have is this:

if( $('.this > div > :first-child').is('ul') ) {
  console.log('First child of .this is a UL');
}
7
  • 1
    You need to dig a level deeper for the UL/P Jul 8, 2014 at 16:12
  • @user3558931 OP has <div class="this">, which is why I used .this as a selector. I agree that this is not a very good class name, but the code is correct for the markup given. Jul 8, 2014 at 16:15
  • @Jordan i am sorry, i mean with class this that this $(this) dont know how to say it right.
    – Salix
    Jul 8, 2014 at 16:21
  • @Salix I'm not sure I've interpreted what you want correctly, but I've updated my answer to clarify the difference between this and $(".this") in jQuery. Jul 8, 2014 at 16:26
  • @Jordan i edited my code so its more specific. Now when i say "this" i mean the div where the magic happens console.log( $(".this") ); // => [<div class="itsanyclass"></div>] what you gave me is exactly what i need, but i dont know how it works with this if( $(this+'> div > :first-child').is('ul') )
    – Salix
    Jul 8, 2014 at 16:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.