1

不确定我是否在这里遗漏了明显的东西，但已经让自己陷入困境试图解决这个问题。

我想找到一个容器的第一个子元素，然后返回它的元素或类并使用它来获取该容器中的任何其他顶级匹配元素。

例如

<div class="box">
    <a href="#">The First Element</a>
    <div><p> some content with a <a href="#">link that should not be included</a></div>
    <h2>a heading</h2>
    <p>this is some content</p>
    <a href="#">This link should be found by the search</a>
</div>

所以我想使用 jQuery 找出第一个孩子是什么（在这种情况下是一个“a”标签），然后搜索任何匹配的元素，我宁愿只得到直接的后代，有什么想法吗？

编辑：感谢您的出色回应-我认为我缺少的第一件事是 .prop 方法，必须测试几个解决方案，看看哪个最适合....更新即将推出。

4

5 回答 5

1 
var $box = $('.box'), 
    $first = $box.children().first(),
    type = $first.prop('localName'),
    $matching = $box.children(type);

http://jsfiddle.net/X8hgP/

于 2013-01-08T13:31:56.073 回答
1

有点不清楚，所以这里有一些选择：我把背景调成石灰只是为了演示前几个。

然后，第一个链接的所有兄弟姐妹：

$('a:first').siblings().css('background-color', 'lime');

框内第一个元素的所有兄弟元素：

$('.box>:first').siblings().css('background-color', 'lime');

a框内第一个元素的所有兄弟

$('.box>:first(a)').siblings().css('background-color', 'lime');

现在，一些更复杂的东西，与第一个元素匹配的东西：

$('.box>:first').each(function () {
  //if it has a single class we can do this
  var myclass = '.' + $(this).attr('class');
  // use that single class above
  $(this).siblings(myclass).css('background-color', 'blue');

  //find elements with the same tag that are siblings of my element
  $(this).siblings(this.tagName).css('background-color', 'lime');

  //handle multiple classes
  var myclassAll = $(this).attr('class');

  //split the multiple classes, then use it
  var myclassList = myclassAll.split(" ");
  $(this).siblings().each(function () {
    var iam = $(this);// each sibling
    $.each(myclassList, function (i) {
      if (iam.hasClass(myclassList[i])) {
        iam.addClass(myclassList[i] + 'New');//add new class on matches
      }
    });
  });
});
于 2013-01-08T14:44:16.830 回答
0 
var fc= jQuery(".box>:first-child").eq(0); //is the first child of container
var allE = fc.parent().children(fc.prop("tagName")); //contains all elements with tagname equal to fc's
于 2013-01-08T13:38:58.103 回答
0

看看这个 - http://jsfiddle.net/xyK72/

var selectedElement = $('.box > :first-child').prop('tagName');
$('.box > :first-child').siblings(selectedElement).addClass('highlight');

请注意，您正在寻找兄弟姐妹，而不是后代。

于 2013-01-08T13:43:58.230 回答
0 
var first_element = $(".box *:first-child").prop("tagName");
alert( first_element  );

注意 >>> *:first-child它从选择器中获取第一个 HTML 标签

于 2013-01-08T13:45:38.337 回答