找不到使用JQuery選擇特定元素的方法

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>

我想要每個不在li內的ul標記的第一個li中的第一個鏈接，對於具有“ col”類的每個div。 我希望一切都清楚..

有人可以幫我嗎 ？

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();

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

 <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> 

Answer 4

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

 <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" id="1"></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" id="2"></a> <!-- and this... --> <ul> <li><a href="useless_link"></a></li> </ul> </li> </ul> </div> <div class="col2"> <ul> <li> <a href="link" id="3"></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" id="4"></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>