Question

我有一个包含不同条目的页面。有时，此条目的第一项是<ul>，有时它是<p>。我怎样才能测试它是哪一个？

以下是第一项<p>：

的示例

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

以下是第一项<ul>：

的示例

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

我试过了：

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

类.this表示调用该函数的对象。

Answer 1

您的代码存在一些问题：

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

首先，您希望JavaScript中的this与<div>一起引用class="this"，但这不是this在JavaScript中的含义。在JavaScript this中是refers to the current scope的变量。如果您想使用class="this"获取元素，则需要使用.this选择器：

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

现在，要获得div .this内的第一个孩子，您需要这样做：

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

您可能认为只有".this :first-child"可以逃脱，但是如果没有直接的子选择器（>），:first-child将返回＆＃的每个元素39;是{em>任何 .this个孩子的第一个孩子。

现在我们已选择了正确的元素（将是<p>或<ul>），我们使用jQuery的is()函数来测试是否或它不匹配给定的选择器，即.is('ul')仅在所选元素为true时才会返回<ul>。

最后，我们拥有的是：

if( $('.this > div > :first-child').is('ul') ) {
  console.log('First child of .this is a UL');
}

Answer 2

您可以使用包含。我为我正在处理的项目做了这个，其中内容也是第一个或第二个子元素。

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

或者，你可以在元素中添加一个类或id并调用

Answer 3

我尊重别人的答案但是，我想确切的问题是......＆＃34;哪个是第一个类型元素？＆＃34;

虽然其他答案可能是正确的，但仍然要回答这个问题，你可以试试这个：

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

当然，为了将功能代码与您检测到的类型相关联，您可以使用.is()，如答案中所示。

请看这里：http://jsfiddle.net/zLwL2/

如何知道哪个是元素的第一个子元素？

3 个答案: