Question

我试图使用JQuery获取所有标签元素（带孩子），但我认为我感到困惑......

我尝试了以下内容，以及其他尝试的变体，但我似乎无法检索超过1个标签......我错过了什么？

谢谢！ S上。

   $(".tasks section p a[class=add-task]").click(function(){
      var obj = $(this).parent().parent().children(".tasks .task > label").html();
      alert(obj);
   });

具有以下内容：

<section class="tasks">
   <h2>Listes de taches</h2>
   <section class="task" id="list-1">
      <h3>Liste 1</h3>

      <label for="list-1_task-1">
         <input type="checkbox" name="checkbox" id="list-1_task-1" value="value">
         Tache 1 <span class="notification">1</span>
      </label>              


      <label for="list-1_task-2">
         <input type="checkbox" name="checkbox" id="list-1_task-2" value="value">
         Tache 2 <span class="notification">2</span>
      </label>              

      <p><a href="#" class="add-task" id="add-task:1">Ajouter une tache</a></p>

Answer 1

尝试使用.each()，因为.html()只会获得第一个实例的innerHtml，

$(".tasks section p a.add-task").click(function () {
    var obj = "";

    $(this).parent().siblings("label").each(function(){
      obj += $(this).html();
    })

    alert(obj);
});

DEMO

Answer 2

您的代码$(this).parent().parent().children(".tasks .task > label")会返回多个HTML对象。并且.html（）只返回第一个匹配元素的html（根据 @A.Wolff 注释）。所以你应该使用.each()。

$(".tasks section p a[class=add-task]").click(function(){
    var obj = "";
    $(this).parent().parent().children(".tasks .task > label").each(function(){
       obj += $(this).html();
    });
     alert(obj);
});

Working Example

Answer 3

有很多简单的方法可以做到这一点：

一，兄弟选择器：

$("a.add-task").click(function(){
    var labels = $(this).parent().siblings("label");
});

两个，父选择器：

$("a.add-task").click(function(){
    var labels = $(this).parents('.task').children("label");
});

按标签名称选择（使用查找）：

$("a.add-task").click(function(){
    var labels = $(this).parents('.task').find("label");
});

您将获得.task div中您单击a.add-task链接的所有标签元素。

获得标签后，您必须使用$.each或labels.each方法循环并获取每个项目的HTML。

labels.each(function(){
    var html = $(this).html();

    // do whatever you want.
});

针对所有父母的孩子

3 个答案:

DEMO