jQuery 查找并列出特定 DIV 中 UL 中的所有 LI 元素

jQuery Find and List all LI elements within a UL within a specific DIV

本文关键字：UL 元素 LI DIV 查找 jQuery      更新时间：2023-09-26

我有 3 列 UL，每列都是动态 UL 容器，可以有 0-9 个 LI 容器(最终更多(。我所有的 LI 元素都有一个属性"rel"，我试图最终找到该属性并将其用于该父 DIV 中所有 LI 元素的其他内容。我最终确实想根据每个找到更多，但并非最不重要的是rel.。任何想法如何通过jQuery实现这一目标？例：

<ul id="column1">
   <li rel="1">Info</li>
   <li rel="2">Info</li>
   <li rel="3">Info</li>
</ul>
<ul id="column2">
   <li rel="4">Info</li>
   <li rel="5">Info</li>
   <li rel="6">Info</li>
</ul>
<ul id="column3">
   <li rel="7">Info</li>
   <li rel="8">Info</li>
   <li rel="9">Info</li>
</ul>

这些元素也是可排序的。因此，当我得到它们的列表时，我还想按照每列从上到下的顺序保存它们。

我试过 find((、parent(( 和类似的，也许我走错了。但仍然值得一提的是帮助提出一个想法

你在想这样的事情吗？

$('ul li').each(function(i)
{
   $(this).attr('rel'); // This is your rel value
});

var column1RelArray = [];
$('#column1 li').each(function(){
    column1RelArray.push($(this).attr('rel'));
});

或 FP 样式

var column1RelArray = $('#column1 li').map(function(){ 
    return $(this).attr('rel'); 
});

html

<ul class="answerswerList" id="oneAnswer">
    <li class="answerswer" value="false">info1</li>
    <li class="answerswer" value="false">info2</li>
    <li class="answerswer" value="false">info3</li>
</ul>

获取索引，文本，值.js

    $('#oneAnswer li').each(function (i) {
        var index = $(this).index();
        var text = $(this).text();
        var value = $(this).attr('value');
        alert('Index is: ' + index + ' and text is ' + text + ' and Value ' + value);
    });

$('li[rel=7]').siblings().andSelf();
// or:
$('li[rel=7]').parent().children();

既然您添加了该注释，解释了您要"形成每列的rels数组"，您应该这样做：

var rels = [];
$('ul').each(function() {
    var localRels = [];
    $(this).find('li').each(function(){
        localRels.push( $(this).attr('rel') );
    });
    rels.push(localRels);
});
相关文章：