jQuery-查找每個節點的所有第一個兄弟姐妹

Question

HTML：

<ul class="treeview">
  <li>
    <a data-toggle="collapse" href=".options1"> <!-- this one -->
      Item 1
    </a>
    <ul class="collapse options1">
      <li>
        <a data-toggle="collapse" href=".sublevel1"></a> <!-- this one -->
        <input type="checkbox" value="option1" />
        <a data-toggle="collapse" href=".sublevel1">Item 1-1</a> <!-- not this one -->
        <ul class="collapse sublevel1">
          <li>
              Item 1-1-1
            <ul>
              <li><input type="checkbox" value="option1" />
                Item 1-1-1-1
              </li>
              <li><a data-toggle="collapse" href=".collapse1-1-1-1-1"></a> <!-- this one -->
              <input type="checkbox" value="option1" />
                <a data-toggle="collapse" href=".collapse1-1-1-1-1">Item 1-1-1-2</a> <!-- not this one -->
                <ul class="collapse collapse1-1-1-1-1">
                  <li>Item 1-1-1-2-1
                    <ul>
                      <li><input type="checkbox" value="option1" />Item 1-1-1-2-1-1</li>
                      <li><a data-toggle="collapse" href=".collapse1-1-1-1-1-1-1"></a><input type="checkbox" value="option1" />
                        <a data-toggle="collapse" href=".collapse1-1-1-1-1-1-1">Item 1-1-1-2-1-2</a>
                        <ul class="collapse collapse1-1-1-1-1-1-1">
                          <li>Item 1-1-1-2-1-2-1
                            <ul>
                              <li><input type="checkbox" value="option1" />Item 1-1-1-2-1-2-1-1</li>
                              <li><input type="checkbox" value="option1" />Item 1-1-1-2-1-2-1-2</li>
                              <li><input type="checkbox" value="option1" />Item 1-1-1-2-1-2-1-3</li>
                              <li><input type="checkbox" value="option1" />Item 1-1-1-2-1-2-1-4</li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><input type="checkbox" value="option1" />Item 1-2</li>
      <li><input type="checkbox" value="option1" />Item 1-3</li>
      <li><input type="checkbox" value="option1" />Item 1-4</li>
    </ul>
  </li>
</ul>

jQuery的：

$('.treeview ul').not('ul:not([class])').siblings('a')
        .prepend("<span>XYZ</span>");

如您所見，我已經在尋找所有沒有任何類名的<ul> ，然后在尋找<a>兄弟姐妹，但是我只需要第一個兄弟姐妹（在輸入復選框之前）。

這是一個jsFiddle可以幫助您： https ：//jsfiddle.net/st2yehgr/1/（提示：所有具有雙“ XYZ”的項目，我只想要第一個）

有人能幫我一下嗎？？ 干杯! :)

Answer 1

你可以試試這個

$('.treeview li>a:first-child')
        .prepend("<span>XYZ</span>");

檢查這個小提琴

Answer 2

回答：@mplungjan

$('.treeview ul').not('ul:not([class])').each(function() {
 $(this).find("a").first().prepend("<span>XYZ</span>");
});

他的小提琴： https : //jsfiddle.net/qtrhu249/1/ （然后我更新了html，使其也覆蓋了第一級[將所有內容包裝在div中]）。

Answer 3

$('.collapse li').find( "input[type='checkbox']" ).prev().prepend("<span>XYZ</span>")

嘗試這個