爲每個循環動態生成的第一個/最後一個元素添加類

即使使用我有限的編碼經驗，這看起來仍然是一個相當困難的問題，但是如果我可以自己找到解決方案，或者在這裏，我會很尷尬。我的HTML頁面上有多個元素，其類別爲.innertables。我的基礎上，單獨的變量，這個包裝類動態生成HTML像這樣：爲每個循環動態生成的第一個/最後一個元素添加類

var limit = 3 //dynamically generated, could be any integer 
$(".innertables").each(function() { 
    var divs = $(this).children('.togcont').slice(0,limit); 
     for(var i = 0; i < limit; i++) { 
      divs.wrapAll("<div class='wrap'><div class='pre'></div><div class='morecont'>More -&gt;</div><div class='lesscont'>&lt;- Back</div> </div>"); 
     } 
    });

這會產生這個例子中的HTML代碼段的多個實例：

<div class="innertables"> 
    <div class="wrap"> 
     <div class="pre">Header Text 
      <div class="togcont">Text 1</div> 
      <div class="togcont">Text 2</div> 
      <div class="togcont">Text 3</div> 
     </div> 
     <div class="morecont">More -&gt;</div> 
     <div class="lesscont">&lt;- Back</div> 
    </div> 
    <div class="wrap"> 
     <div class="pre">Header Text 
      <div class="togcont">Text 4</div> 
      <div class="togcont">Text 5</div> 
      <div class="togcont">Text 6</div> 
     </div> 
     <div class="morecont">More -&gt;</div> 
     <div class="lesscont">&lt;- Back</div> 
    </div> 
    <div class="wrap"> 
     <div class="pre">Header Text 
      <div class="togcont">Text 7</div> 
      <div class="togcont">Text 8</div> 
      <div class="togcont">Text 9</div> 
     </div> 
     <div class="morecont">More -&gt;</div> 
     <div class="lesscont">&lt;- Back</div> 
    </div> 
</div>

到目前爲止，一切都很好。我想要做的是在.innertables的每個實例中向第一個實例morecont和morecont和lesscont添加第二類。好像加入以下的.innertables每個循環會做的伎倆：

$(".morecont").first().addClass("shiftleft"); 
$(".lesscont").last().addClass("hide"); 
$(".morecont").last().addClass("hide");

但是這增加了類最先.morecont所有.innertables的頁面上，並在所有這些最後的情況下，，以及。我嘗試了不同的方式，比如將.wrap添加爲第一類，例如$(".wrap .morecont").first()，結果相同，並且類似$(".wrap .morecont:first-child").addClass("shiftleft");，根本沒有結果。我知道一個.each（）循環將遍歷每個.innertables的實例，並且能夠對每個被循環的實例進行更改。我在這裏做錯了什麼？

來源

2014-05-01 jimiayler

嘗試使用jQuery的每個函數。

$(".innertables").each(function() { 
    $(this).find(".morecont").first().addClass("shiftleft"); 
    $(this).find(".lesscont").last().addClass("hide"); 
    $(this).find(".morecont").last().addClass("hide"); 
});

這主要是告訴了jQuery找出第一個/最後你想要什麼每個.innertable的內範圍。

你做錯了什麼是你正在使用.each()循環，但你沒有使用$(this).children("selector")縮小選定的元素。如果您直接使用$("selector")，即使它在.each()之內，也不起作用。

編輯：改變.children()到.find()

來源

2014-05-01 19:16:21 Tarun

您可能能夠使用方法：先和：最後一個jQuery選擇爲了做到這一點沒有一個循環？ – user3334690

這是有道理的，但很抱歉地說，這是行不通的 - 沒有額外的類被添加，甚至當我把'$（this）.children（「。morecont」）。addClass（「shiftleft」）;'in一個'$（「。innertables」）。each（）'循環。現在，如果我添加類似'$（「.morecont」）.addClass（「shiftleft」）;'，每個.morecont'元素都會獲得一個額外的'.shiftleft'類，但這當然不是我想要的。但解決方案必須在'$ .each（）'中，我必須想象。 – jimiayler

@jimiayler哎呀。我仔細看了一下代碼，這是因爲我們應該使用'$（this）.find（）'而不是'$（this）.children（）'，因爲'children（）'只查看元素的直接子女。我編輯了我的原始答案，看看那個新的代碼。 – Tarun

爲每個循環動態生成的第一個/最後一個元素添加類

回答

相關問題