【问题标题】:jQuery Find and List all LI elements within a UL within a specific DIVjQuery 查找并列出特定 DIV 中 UL 内的所有 LI 元素
【发布时间】:2011-10-29 10:32:07
【问题描述】:

我有 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() 和类似的方法,也许我处理错了。但它仍然值得一提,以帮助提出一个想法

【问题讨论】:

  • 你想通过 rel 选择吗?或者获取一个rels数组?
  • 试图在每列中形成一个 rel 数组。

标签: javascript jquery find children


【解决方案1】:
var column1RelArray = [];
$('#column1 li').each(function(){
    column1RelArray.push($(this).attr('rel'));
});

或fp风格

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

【讨论】:

  • 你能告诉我如何从数组中分别检索每个 li 元素 id 吗?这样我就可以用来将一些 css 应用于其中一个 id
  • 请在堆栈溢出中提出一个新问题。这些不是 cmets,而是进一步的问题。
【解决方案2】:

html

<ul class="answerList" id="oneAnswer">
    <li class="answer" value="false">info1</li>
    <li class="answer" value="false">info2</li>
    <li class="answer" 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);
    });

【讨论】:

    【解决方案3】:
    $('li[rel=7]').siblings().andSelf();
    
    // or:
    
    $('li[rel=7]').parent().children();
    

    既然您添加了解释您想要“每列形成一个 rel 数组”的注释,您应该这样做:

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

    【讨论】:

      【解决方案4】:

      你在想这样的事情吗?

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

      【讨论】:

      • 这只有在你的 html 页面包含一个 'ul' 元素时才有效,如果我有不同的 'ul' 元素并且我不想得到这个的 id。
      猜你喜欢
      • 2016-02-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-03-25
      • 1970-01-01
      • 2021-07-03
      相关资源
      最近更新 更多