Question

我试图用JQuery选择这些元素：

<div attribute="distinct-value"> <!-- i only want links in this one, select based on the attribute -->
    <div>
        <div>
            <div class="col1">
                <ul>
                    <li>
                        <a href="link"></a> <!-- i want this -->
                        <ul>
                            <li><a href="useless_link"></a></li>
                            <li><a href="useless_link"></a></li>
                            <li><a href="useless_link"></a></li>
                            <li><a href="useless_link"></a></li>
                        </ul>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="link"></a> <!-- and this... -->
                        <ul>
                            <li><a href="useless_link"></a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="col2">
                <ul>
                    <li>
                        <a href="link"></a> <!-- and this... -->
                        <ul>
                            <li><a href="useless_link"></a></li>
                            <li><a href="useless_link"></a></li>
                        </ul>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="link"></a> <!-- and this... -->
                        <ul>
                            <li><a href="useless_link"></a></li>
                            <li><a href="useless_link"></a></li>
                            <li><a href="useless_link"></a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- col3, col4, etc, etc... -->
        </div>
    </div>
</div>
<div attribute="another-distinct-value">
<!-- same content structure has 'distinct-value div' -->
</div>
<div attribute="another-other-distinct-value">
<!-- same content structure has 'distinct-value div' -->
</div>

我希望每个ul标记的第一个li中的第一个链接不在li中，对于每个具有＆＃34; col＆＃34;类。我希望一切都很清楚..

有人能帮助我吗？

Answer 1

循环遍历你的元素

$('div[attribute="distinct-value"] [class^=col] li:has(ul) > a').each(function(index) {
   console.log( index + ": " + $( this ).text() );
  });

Answer 2

试试这个：

$('div[class^=col] > ul > li > a').each(function() {
    doSomething( $(this) );
});

Answer 3

您可以将其中包含ul的li与直接子选择器（>）对齐，以定位直接子锚元素：

 $('[class^=col] li:has(ul) > a');

您可以迭代上面的元素集并执行任务。如果您想获得锚元素的所有href，则需要将.map()与.get()一起使用：

 var allhref =  $('[class^=col] li:has(ul) > a').map(function(){
    return $(this).attr('href');
 }).get();

＆＃13;

var allhref =  $('[class^=col] li:has(ul) > a').map(function(){
    return $(this).attr('href');
 }).get();
alert(allhref);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div attribute="distinct-value">
    <div>
        <div>
            <div class="col1">
                <ul>
                    <li>
                        <a href="link"></a> <!-- i want this -->
                        <ul>
                            <li><a href="useless_link"></a></li>
                            <li><a href="useless_link"></a></li>
                            <li><a href="useless_link"></a></li>
                            <li><a href="useless_link"></a></li>
                        </ul>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="link"></a> <!-- and this... -->
                        <ul>
                            <li><a href="useless_link"></a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="col2">
                <ul>
                    <li>
                        <a href="link"></a> <!-- and this... -->
                        <ul>
                            <li><a href="useless_link"></a></li>
                            <li><a href="useless_link"></a></li>
                        </ul>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="link"></a> <!-- and this... -->
                        <ul>
                            <li><a href="useless_link"></a></li>
                            <li><a href="useless_link"></a></li>
                            <li><a href="useless_link"></a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- col3, col4, etc, etc... -->
        </div>
    </div>
</div>

＆＃13;

Answer 4

Class is loaded
Constructor called, me=null
me is instantiated
START
Constructor called, me=oop.InitItself@6ff3c5b5
FINISH

console.log($('div[class^=col] > ul > li > a'));

无法找到使用JQuery选择特定元素的方法

4 个答案: