Question

我有一个无序列表，每个< li >的输入类型为< checkbox >。它还具有带有<a href >属性的锚标记。 A:href是根据用户输入动态构建的。

我想遍历< li >列表，找到选中的输入并仅获取那些选中的输入的href。

    <ul>
      <li><input type="checkbox"><a href="#">Link 1</a></li>
      <li><input type="checkbox"><a href="#">Link 2</a></li>
    </ul>

伪代码中的逻辑是：

for all li 
if checkbox is checked
get anchor property href

问题是，当我使用$ ( "a" )及其所有替代项:checked，li.active input:checkbox，$( "ul li checkbox:checked a" )，$this.children(":checked").each(function(){ ...etc}时，DOM将不返回所有锚点只是:checked输入的锚点。它不会遍历列表中的列表。每次都会退出选中列表项的范围。

我尝试过的一些解决方案如下：

1

$( ":checkbox:checked" ).prop( true , function(){
    $( "a" ).css( "background-color","yellow" );
});

2

$(":checkbox:checked").each(function (){
   window.open($(".myID")
  .attr("href")) 
   });

3

$('li').each(function(){
    //go to li children
    var $this = $(this);
    $this.children(":checked").each(function(){
          $this; // parent li
          $this.css( "background-color","green" ); //works until here
          var $childs = $this.children(":checked"); 
         $childs.children("a").each(function(){ //undefined
           //PRINT OUT HREF OF A (DID NOT WORK EITHER)
         });
    });

4

$('#li.active input:checkbox').on('change', function () {
    getAllValue()
});

function getAllValue() {
    var sThisVal = $(':checkbox:checked').map(function () {
        return this.value;
    }).get();
    alert(sThisVal);
}

我意识到$("selector")不能用于合并两个父代>子标记的条件（如果错了，请纠正我），即$。“（a [href]：checkbox：checked”）将返回< strong>所有锚点和所有输入复选框。 if语句也是如此。我以为.children()函数可以为我提供对象，但似乎无法像我期望的那样使用input类型checkbox，因为它没有结束标记（？这是猜测）

我不想触摸html模式，因为它是动态构建的，这是项目的最后阶段。

我要感谢大家在这里提供的帮助。我一直在寻找问题的答案已有3天了。因此，请不要打“之前回答过”这句话，因为请相信我，我尝试了所有建议的答案，但由于这种情况有所不同，所以没有用。

Answer 1

您的结构与此CSS选择器相对应：

li > :checked + a
^  ^     ^    ^ ^  
|  |     |    |  -- an <a> element
|  |     |    |
|  |     |     ---- which directly follows
|  |     |
|  |      --------- an element currently checked (<input>)
|  |
|   --------------- which is a direct child of
|
 ------------------ an <li> element

因此只需使用它，然后遍历匹配的<a>元素

button.onclick = function(evt) {
  $('li > :checked + a').each(function(i, el) {
    console.log(el.getAttribute('href'));
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">click</button>
<ul>
  <li><input type="checkbox"><a href="/link1">Link 1</a></li>
  <li><input type="checkbox"><a href="/link2">Link 2</a></li>
</ul>

如果只处理newest browsers，则可以不用库就可以做到：

button.onclick = (evt) => {
  [... document.querySelectorAll('li > :checked + a')]
    .forEach( (el) =>
      console.log( el.getAttribute('href') )
    );
};

<button id="button">click</button>
<ul>
  <li><input type="checkbox"><a href="/link1">Link 1</a></li>
  <li><input type="checkbox"><a href="/link2">Link 2</a></li>
</ul>

Answer 2

进行迭代时，同时选中复选框子级和ul子级中的<a>子级：

button.onclick = () => {
  $('li').each(function() {
    const [checkbox, a] = this.children;
    if (checkbox.checked) {
      console.log(a.getAttribute('href'));
    }
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">click</button>
<ul>
  <li><input type="checkbox"><a href="/link1">Link 1</a></li>
  <li><input type="checkbox"><a href="/link2">Link 2</a></li>
</ul>

或者，如果您必须使用jQuery访问器方法：

button.onclick = () => {
  $('li').each(function() {
    const [checkbox, a] = $(this).children();
    if ($(checkbox).is(':checked')) {
      console.log($(a).attr('href'));
    }
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">click</button>
<ul>
  <li><input type="checkbox"><a href="/link1">Link 1</a></li>
  <li><input type="checkbox"><a href="/link2">Link 2</a></li>
</ul>

对于jQuery这样的简单操作，实际上没有任何用处，可以单独使用内置的DOM方法：

button.onclick = () => {
  document.querySelectorAll('li').forEach((li) => {
    const [checkbox, a] = li.children;
    if (checkbox.checked) {
      console.log(a.getAttribute('href'));
    }
  });
};

<button id="button">click</button>
<ul>
  <li><input type="checkbox"><a href="/link1">Link 1</a></li>
  <li><input type="checkbox"><a href="/link2">Link 2</a></li>
</ul>

JQUERY IF-STATEMENTS仅获取<a>标记的href属性，它是<li>中：checked复选框<input>的子元素。

2 个答案: